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" onclick="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" onclick="submt()">
<input type="button" class="btn btn-primary center-block" onclick="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>

作者：lanjg521224
来源：CSDN
原文：https://blog.csdn.net/u011009362/article/details/56011236?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！

JS导出excel表格相关推荐

原生js导出excel表格，0开头的字符串自动去掉转换成数字
解决方式.优化方式: // 解决excel下载前边的0消失问题 ' ' + value + ' ' 但是此方式导出的excel表格会有警告:该内容前后有空字符串,会影响计算优化解决方式: <t ...
前端JS导出Excel表格可筛选列 table2excel
git地址 table2excel 本文参考了 (14条消息) table2excel 导出表格有边框,文字居中_狂吃狂吃的瘦子的博客-CSDN博客_table2excel 边框效果如图 ...
js导出excel（js-export-excel）
js导出excel表格这个需求在后台管理系统中很常见, 我们使用js-export-excel进行excel的导出首先在我们的项目中安装这个包 npm install js-export-exce ...
js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格
安装 npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsx https://github ...
Extjs 从grid中导出Excel表格。后台为C#（绝对好用）（按照自己的需求修改版本）...
最近生成Excel表格,稍微得到一点新的体会,特此更新自己开发时候的版本. 开发工具:VS2005 数据库:oracle10.1 浏览器:firefox3.5.9 第一步,web层aspx文件需要载 ...
前端导出Excel表格
vue + xlsx实现Excel导出简单粗暴步骤,无需花里胡哨第一步:npm install --save xlsx@0.14.3 第二步:全局封装公共方法(或者局部定义) import XLS ...
vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...
chrome浏览器使用js导出Excel出现网络错误
使用js 导出Excel由于数据量太大导致出现网络错误,如图所示: 解决办法: 表格绘制完成后,使用 Blob let blob = new Blob([format(template, ctx]); ...
layui导出Excel表格自定义文件名称
预备操作 1.找到 /layui/lay/modules/table.js文件 2.搜索exportFile,找到d.exportFile=function(e,t,i) 修改为 d.exportFi ...

JS导出excel表格

JS导出excel表格相关推荐

最新文章

热门文章