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:window.open弹出窗口的位置问题
Mar 18 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python实现分页效果
2017/10/25 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
网络安全类面试题
2015/08/01 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
大学活动总结模板
2014/07/10 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js