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);
  };