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实现页面定时跳转总结篇
Sep 21 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
javascript实现放大镜功能
Dec 09 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
python实现自动打卡的示例代码
2020/10/10 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
vue+django实现下载文件的示例
2021/03/24 Vue.js
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
教师个人教学总结
2015/02/11 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL