js-xlsx 一个实用的js 导出列表插件

　　在前端开发过程中，导出列表功能的开发无非两种，一种是有后台生成，发生给前端下载，第二种是前端进行列表的导出工作。之前接触了一种前端导出列表的插件 tableExport.js ，但是其缺点很明显，需要将需要导出的列表通过table表格的标准形式渲染到页面中，才能够导出。当数据量大的时候，浏览器渲染大量数据到页面中，很容易出现卡顿甚至是崩溃。为了导出大量数据，查找测试了一些其他的列表导出插件，最后发现js-xlsx 比较出众。

　　js-xlsx 无需将数据渲染到页面中，他是通过流转换的形式来导出列表。其导出格式包括了xlsx、ods、xlsb、fods、xls等等，较为丰富。使用方法较为简单，可以将其封装成公共的方法，在需要的地方调用即可。

 1  /**
 2    * 导出列表方法
 3    * @param {*} data  需要导出的数据  数组形式  [[表头]，[数据1]，[数据2]...]
 4    * @param {*} fileName 下载的文件名称
 5    * @param {*} titleName 表格标题
 6    * @param {*} type
 7    */
 8 function downloadExl(data, fileName,titleName,type) {
 9     const self = this;
10     const range = data[0].length - 1;
11      const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
12       const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
13       data = XLSX.utils.json_to_sheet(data); 
14       data["A1"] = { t: "s", v: titleName}; //设置表格标题
15       data["!merges"] = [{//合并第一行数据[B1,C1,D1,E1]
16       s: {//s为开始
17                 c: 0,//开始列
18                 r: 0,//开始取值范围
19                 alignment: {horizontal: "center" ,vertical: "center"}
20             },
21             e: {//e结束
22                 c: range,//结束列
23                 r: 0//结束范围
24             }
25         }];
26       wb.Sheets['Sheet1'] = data;
27       self.saveAs(new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), fileName + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
28       };

 1   /**
 2    * 导出列表方法   数据转换
 3    * @param {*} s
 4    */
 5   exports.s2ab = function(s) {
 6     if (typeof ArrayBuffer !== 'undefined') {
 7         var buf = new ArrayBuffer(s.length);
 8         var view = new Uint8Array(buf);
 9         for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
10         return buf;
11     } else {
12         var buf = new Array(s.length);
13         for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
14         return buf;
15     }
16   };

  /**
   * 导出列表方法，下载文件
   */
  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);
  };