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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
js实现每日签到功能
Nov 29 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
做一个有下拉功能的留言版
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python中的全局变量用法分析
2015/06/09 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python pandas时序处理相关功能详解
2019/07/03 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python socket模块方法实现详解
2019/11/05 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
心理健康日活动总结
2014/05/08 职场文书
博士生导师推荐信
2014/07/08 职场文书
建筑横幅标语
2014/10/09 职场文书
中学生运动会广播稿
2015/08/19 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
golang 实现Location跳转方式
2021/05/02 Golang
 Python 中 logging 模块使用详情
2022/03/03 Python