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 EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
vue配置多页面的实现方法
May 22 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
openlayers4实现点动态扩散
Aug 17 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与SQL注入攻击[二]
2007/04/17 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python中的sort方法使用详解
2014/07/25 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
小学新学期教师寄语
2014/01/18 职场文书
英语生日邀请函
2014/01/23 职场文书
租房合同协议书
2014/04/09 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
合伙购房协议样本
2014/10/06 职场文书
最感人的道歉情书
2015/05/12 职场文书
2015党建工作简报
2015/07/21 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL