js前端导出Excel的方法 / 张生荣

需求：

要求把项目中的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文件，用浏览器打开即可查看是否可以导出，如果可以导入项目中，把数据填充即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js前端导出Excel的方法

相关推荐

随机推荐