js-xlsx 一個實用的js 導出列表插件

 

　　在前端開發過程中，導出列表功能的開發無非兩種，一種是有后台生成，發生給前端下載，第二種是前端進行列表的導出工作。之前接觸了一種前端導出列表的插件 tableExport.js ，但是其缺點很明顯，需要將需要導出的列表通過table表格的標准形式渲染到頁面中，才能夠導出。當數據量大的時候，瀏覽器渲染大量數據到頁面中，很容易出現卡頓 甚至是崩潰。為了導出大量數據，查找測試了一些其他的列表導出插件，最后發現js-xlsx 比較出眾。

　　js-xlsx 無需將數據渲染到頁面中，他是通過流轉換的形式來導出列表。其導出格式包括了xlsx、ods、xlsb、fods、xls等等，較為豐富。使用方法較為簡單，可以將其封裝成公共的方法，在需要的地方調用即可。

 /**
   * 導出列表方法
   * @param {*} data  需要導出的數據  數組形式  [[表頭]，[數據1]，[數據2]...]
   * @param {*} fileName 下載的文件名稱
   * @param {*} titleName 表格標題
   * @param {*} type
   */
function downloadExl(data, fileName,titleName,type) {
    const self = this;
    const range = data[0].length - 1;
     const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
      const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
      data = XLSX.utils.json_to_sheet(data); 
      data["A1"] = { t: "s", v: titleName}; //設置表格標題
      data["!merges"] = [{//合並第一行數據[B1,C1,D1,E1]
      s: {//s為開始
                c: 0,//開始列
                r: 0,//開始取值范圍
                alignment: {horizontal: "center" ,vertical: "center"}
            },
            e: {//e結束
                c: range,//結束列
                r: 0//結束范圍
            }
        }];
      wb.Sheets['Sheet1'] = data;
      self.saveAs(new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), fileName + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
      };

  /**
   * 導出列表方法   數據轉換
   * @param {*} s
   */
  exports.s2ab = function(s) {
    if (typeof ArrayBuffer !== 'undefined') {
        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;
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
  };

  /**
   * 導出列表方法，下載文件
   */
  exports.saveAs = function(obj, fileName) {//當然可以自定義簡單的下載文件實現方式
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj); //綁定a標簽
    tmpa.click(); //模擬點擊實現下載
    setTimeout(function () { //延時釋放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
    }, 100);
  };