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 相关文章推荐
jQuery实现跨域
Feb 03 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python读取word文本操作详解
2018/01/22 Python
python设置随机种子实例讲解
2019/09/12 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
物流司机岗位职责
2013/12/28 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
五年级作文之成长
2019/09/16 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python