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 相关文章推荐
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解javascript中的Error对象
Apr 25 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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变量修饰符static的使用
2013/06/28 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python绘制雪景图
2019/12/16 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
C# .NET面试题
2015/11/28 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
vue中div禁止点击事件的实现
2022/04/02 Vue.js
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS