vue iview table导出excel功能,支持多个sheet

需求:在iview-admin框架中写项目,遇到需要导出excel,并导出多个sheet

分析:iview 中table现有的导出Csv不符合要求,需要另外找相关插件

结果:用xlsx  gitHub:https://github.com/SheetJS/sheetjs

步骤:1、安装:npm install --save xlsx

2、方法:页面引入 import XLSX from 'xlsx';

3、代码:

    // 导出
    exportData() {
      const sheet1data = [{'一':1,'二':2},{'一':3,'二':4}]
      const sheet2data = [{'三':1,'四':2},{'三':3,'四':4}]
      const sheet1 = XLSX.utils.json_to_sheet(sheet1data);
      const sheet2 = XLSX.utils.json_to_sheet(sheet2data);
      /* create a new blank workbook */
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, sheet1, "sheet1");
      XLSX.utils.book_append_sheet(wb, sheet2, "sheet2");
      const workbookBlob = this.workbook2blob(wb);    
      this.openDownloadDialog(workbookBlob, `交班盘点.xlsx`)
    },
    workbook2blob(workbook) {
      // 生成excel的配置项
      var wopts = {
        // 要生成的文件类型
        bookType: "xlsx",
        // // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: "binary"
      };
      var wbout = XLSX.write(workbook, wopts);
      // 将字符串转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;
      }
      var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
      });
      return blob;
    },
    // 将blob对象创建bloburl,然后用a标签实现弹出下载框
    openDownloadDialog(blob, fileName) {
      if (typeof blob == "object" && blob instanceof Blob) {
        blob = URL.createObjectURL(blob); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = blob;
      // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file:///模式下不会生效
      aLink.download = fileName || "";
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      //   移动端
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null );
      }
      aLink.dispatchEvent(event);
    }

 

你可能感兴趣的:(vue)