学习笔记之js中导出表格到excel详解+源码

在系统开发中，经常会遇到要将一个表格数据导出到excel中，刚刚做完，把示例代码共享一下，话不多说直接上代码。

<!DOCTYPE html>
<html>
<head lang="en">  <meta charset="UTF-8">  <title>html 表格导出道</title>  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"></head>
<body>  <div >  </div>
<div id="myDiv">
<table id="tableExcel" width="100%" class="table table-hover" >  <tr>  <td colspan="5" align="center">html 表格导出道Excel</td>  </tr>  <tr>  <td>列标题1</td>  <td>列标题2</td>  <td>类标题3</td>  <td>列标题4</td>  <td>列标题5</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>
<button type="button" class="btn btn-primary center-block" οnclick="method5('tableExcel')">导出Excel</button>
<!-- <input type="file" class="btn btn-primary center-block" value="请选择输出路径"> -->
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>  <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';  }  }  function method5(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();  }  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>
</div>
</body>
</html>

但这个示例有两个缺陷，一是导出的表格单元格边框没有样式，二是不能自定义表格名称，所有又进行了改进，以下是改进版本的代码参考。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body><table id="tableExcel" width="100%" class="table table-hover" >  <tr>  <td colspan="5" align="center">html 表格导出道Excel</td>  </tr>  <tr>  <td>列标题1</td>  <td>列标题2</td>  <td>类标题3</td>  <td>列标题4</td>  <td>列标题5</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><a id="dlink"  style="display:none;"></a>
<input type="text" name="" value="请输入文件名" class="center-block form-control" style="margin-bottom: 20px; text-align: center" id="submit" οnclick="submt()">
<input type="button" class="btn btn-primary center-block" οnclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="Export to Excel">
</body>
<script>var nnn = "";function submt(){document.getElementById('submit').value="";}var tableToExcel = (function () {var uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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("tableExcel")var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }document.getElementById("dlink").href = uri + base64(format(template, ctx));document.getElementById("dlink").download = document.getElementById('submit').value+'.xls';document.getElementById("dlink").click();}})()
</script>
</html>

最后感谢完成这个功能的同事。

学习笔记之js中导出表格到excel详解+源码相关推荐

【异步编程学习笔记】JDK中的FutureTask和CompletableFuture详解（使用示例、源码）
文章目录 FutureTask概述使用实例类图结构 FutureTask的run()方法 FutureTask的局限性 CompletableFuture概述 CompletableFuture代 ...
（*长期更新）软考网络工程师学习笔记——Linux操作系统中的vi/vim 编辑器详解
目录一.vi/vim概念 (一)vi/vim文本编辑器 (二)gedit文本编辑器二.vi编辑器分类三.屏幕编辑器 (一)命令模式 1.进入命令模式 2.命令模式下的常用操作 3.退出命令模式 ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
嵌入式知识-ARM裸机-学习笔记（9）：SD卡启动详解（S5PV210）
嵌入式知识-ARM裸机-学习笔记(9):SD卡启动详解(S5PV210) 一.SD卡介绍 1. SD卡背景知识和特点 SD卡.MMC卡.MicroSD.TF卡:这些卡其实内部就是Flash存储颗粒,比 ...
mysql数据库select语句用法_mysql学习笔记之完整的select语句用法实例详解
本文实例讲述了mysql学习笔记之完整的select语句用法.分享给大家供大家参考,具体如下: 本文内容: 完整语法去重选项字段别名数据源 where group by having order ...
oracle rac 环境配置文件,学习笔记:Oracle RAC spfile参数文件配置案例详解
天萃荷净 rac中的spfile探讨,记录一下Oracle RAC搭建完成后关于spfile参数文件的配置案例,与更改RAC环境中参数文件的方法今天朋友的的rac,因为被同事做数据库升级,分别在两个 ...
js中toString()和String()区别详解
转载自 js中toString()和String()区别详解我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
JS中的日期和时间详解
JS中的日期和时间详解关于Date()构造函数简单实例用Date()构造函数创建时钟关于Date()构造函数 Date()构造函数是javascript的核心语言部分,用来创建表示时间和日期的 ...

学习笔记之js中导出表格到excel详解+源码

学习笔记之js中导出表格到excel详解+源码相关推荐

最新文章

热门文章