純js代碼把表格另存爲Excel文件

原創

2020-02-20 17:12

首先爲什麼要寫這篇文章，因爲這個看上去很容易實現的功能，但網上讀了很多文章，發現要麼不支持IE，要麼還要使用new ActiveXObject("Excel.Application");，要麼就發現導出的文件是html文件（只不過可以用Excel打開），根本就不是真正的Excel文件，所以我很不爽，最後功夫不負有心人，把所有文章來個總結就出來了這麼一個代碼，感覺很好用的樣子，當然還得下載xlsx.core.min.js文件的支持，否則不能導出真正的Excel文件。

<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JS導出excel示例</title>
  <script src='js/xlsx.core.min.js' type='text/javascript'></script>
  <script type="text/javascript">
  function getExplorer(){
    var explorer = window.navigator.userAgent;
    //ie 
    if(explorer.indexOf("MSIE") >= 0){
      return 'ie';
    }
    //Edge
    if(explorer.indexOf("Edge") >= 0){
      return 'ie';
    }
    //Trident
    if(explorer.indexOf("Trident") >= 0){
      return 'ie';
    }
    return '';
  }
  // 將一個sheet轉成最終的excel文件的blob對象，然後利用URL.createObjectURL下載
  function sheet2blob(sheet, sheetName) {
    try {
        new Uint8Array([1,2]).slice(0,2);
    } catch (e) {
        console.log("[Uint8Array"+e.description+"]這裏使用【Array.slice】。");
        //IE或有些瀏覽器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
        Uint8Array.prototype.slice = Array.prototype.slice;
    }
    sheetName = sheetName || 'sheet1';
    var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置項
    var wopts = {
      bookType: 'xlsx', // 要生成的文件類型
      bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啓生成速度會下降，但在低版本IOS設備上有更好的兼容性
      type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
    // 字符串轉ArrayBuffer
    function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
    return blob;
  }
  
  function btn_export() {
    var table = document.getElementById('context');
    var sheet = XLSX.utils.table_to_sheet(table); //將一個table對象轉換成一個sheet對象
    var wb=sheet2blob(sheet);
    if('ie'==getExplorer()){
      window.navigator.msSaveOrOpenBlob(wb,'excel.xlsx');
    }
    else{
      var oa = document.createElement('a');
      oa.href = URL.createObjectURL(wb);
      oa.download = 'excel.xlsx';
      document.body.appendChild(oa);
      oa.click();
      document.body.removeChild(oa);
    }
  }
  </script>
</head>
<body>
  <div class="container">
    <h1>JavaScript導出excel示例（基於js-xlsx）</h1>
    <table border=1 id='context' cellpadding="0" cellspacing="0">
      <tr><td>姓名</td><td>年齡</td></tr><tr><td>張三</td><td>18</td></tr>
    </table>
    
    <h2>導出excel
      <input type="button" οnclick="btn_export()" value="導出"/>
    </h2>
  </div>
</body>
</html>

xlsx.core.min.js文件的下載地址

官方github：https://github.com/SheetJS/js-xlsx

也可以到CSCN上找下載地址，找0分的資源即可，比如：https://download.csdn.net/download/qq_27868533/10249815?utm_source=bbsseo