js前端导出Excel的方法


Posted in Javascript onNovember 01, 2017

需求:

要求把项目中的table表格导出Excel

需求分析及解决:

既然需要导出,是报表的可能性比较大,我的项目中就是这样,那既然是报表导出,可以是前端导出,也可以是后端导出(技术包括POI或者报表工具等),这篇文章主
要是网上找的前端导出,既然是前端导出又是报表就需要有数据,所以数据都需要你提前做好相应填充

代码:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title>html 表格导出</title> 
 <script language="JavaScript" type="text/javascript"> 
  
  
  var idTmr; 
 //获取当前浏览器类型 
  function getExplorer() { 
   var explorer = window.navigator.userAgent ; 
   //ie 
   if (explorer.indexOf("MSIE") >= 0) { 
    return 'ie'; 
   } 
   //firefox 
   else if (explorer.indexOf("Firefox") >= 0) { 
    return 'Firefox'; 
   } 
   //Chrome 
   else if(explorer.indexOf("Chrome") >= 0){ 
    return 'Chrome'; 
   } 
   //Opera 
   else if(explorer.indexOf("Opera") >= 0){ 
    return 'Opera'; 
   } 
   //Safari 
   else if(explorer.indexOf("Safari") >= 0){ 
    return 'Safari'; 
   } 
  } 
   
 //获取到类型需要判断当前浏览器需要调用的方法,目前项目中火狐,谷歌,360没有问题 
  //win10自带的IE无法导出 
  function exportExcel(tableid) { 
   if(getExplorer()=='ie') 
   { 
    var curTbl = document.getElementById(tableid); 
    var oXL = new ActiveXObject("Excel.Application"); 
    var oWB = oXL.Workbooks.Add(); 
    var xlsheet = oWB.Worksheets(1); 
    var sel = document.body.createTextRange(); 
    sel.moveToElementText(curTbl); 
    sel.select(); 
    sel.execCommand("Copy"); 
    xlsheet.Paste(); 
    oXL.Visible = true; 
 
    try { 
     var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 
    } catch (e) { 
     print("Nested catch caught " + e); 
    } finally { 
     oWB.SaveAs(fname); 
     oWB.Close(savechanges = false); 
     oXL.Quit(); 
     oXL = null; 
     idTmr = window.setInterval("Cleanup();", 1); 
    } 
 
   } 
   else 
   { 
    tableToExcel(tableid) 
   } 
  } 
  function Cleanup() { 
   window.clearInterval(idTmr); 
   CollectGarbage(); 
  } 
   
 //判断浏览器后调用的方法,把table的id传入即可 
  var tableToExcel = (function() { 
   var uri = 'data:application/vnd.ms-excel;base64,', 
     template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>', 
     base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, 
     format = function(s, c) { 
      return s.replace(/{(\w+)}/g, 
        function(m, p) { return c[p]; }) } 
   return function(table, name) { 
    if (!table.nodeType) table = document.getElementById(table) 
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} 
    window.location.href = uri + base64(format(template, ctx)) 
   } 
  })() 
 
 </script> 
</head> 
<body> 
 
<div > 
  
 <button type="button" onclick="exportExcel('tableExcel')">导出Excel</button> 
</div> 
<div id="myDiv"> 
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> 
 <tr> 
  <td colspan="5" align="center">html 表格导出道Excel</td> 
 </tr> 
 <tr> 
   
  <td>列标题</td> 
 </tr> 
 <tr> 
  <td>aaa</td> 
  <td>bbb</td> 
  <td>ccc</td> 
  <td>ddd</td> 
  <td>eee</td> 
 </tr> 
 <tr> 
  <td>AAA</td> 
  <td>BBB</td> 
  <td>CCC</td> 
  <td>DDD</td> 
  <td>EEE</td> 
 </tr> 
 <tr> 
  <td>FFF</td> 
  <td>GGG</td> 
  <td>HHH</td> 
  <td>III</td> 
  <td>JJJ</td> 
 </tr> 
</table> 
</div> 
</body> 
</html>

 重点:

把此代码复制到记事本,命名为.html文件,用浏览器打开即可查看是否可以导出,如果可以导入项目中,把数据填充即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
js 数组操作代码集锦
Apr 28 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
如何提高Dom访问速度
Jan 05 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
Vue异步加载about组件
Oct 31 #Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
关于vue面试题汇总
2018/03/20 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python装饰器基础详解
2016/03/09 Python
深入理解python中的atexit模块
2017/03/07 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
高一自我鉴定
2013/12/17 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
小学生安全保证书
2015/05/09 职场文书
2015入党自传书范文
2015/06/26 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
利用Python实现模拟登录知乎
2022/05/25 Python