zoukankan      html  css  js  c++  java
  • 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);
      };
  • 相关阅读:
    Application,Session,Cookie,ViewState,Cache对象用法、作用域的区别
    leetcode系列---3Sum C#code
    leetcode系列---atoiFunction C#code
    leetcode系列---Two Sum C#code
    .NET webAPI中集成swagger
    js去空格
    clip 属性剪裁绝对定位元素
    css实现隐藏显示
    无阻塞加载脚本的方案
    打乱数字数组的顺序
  • 原文地址:https://www.cnblogs.com/toyNotes/p/8617483.html
Copyright © 2011-2022 走看看