ElementUI 表数据导出

表数据导出

前期准备

• vue 依赖安装
  • 普通安装，下载可能较慢 npm install --save xlsx file-saver
  • 使用镜像地址安装 npm install --save xlsx file-saver --registry=https://registry.npm.taobao.org

代码部分

1. 给表格添加一个 id

   

2. 按钮绑定导出事件

   

3. 在 <script></script> 里面导入下载的依赖

   

4. 补充导出数据的方法

   //定义导出Excel表格事件
   exportExcel() {
       /* 从表生成工作簿对象 */
       /* 传入 table id */
       var wb = XLSX.utils.table_to_book(document.querySelector("#allProject"));
       /* 获取二进制字符串作为输出 */
       var wbout = XLSX.write(wb, {
           bookType: "xlsx",
           booksst: true,
           type: "array"
       });
       try {
           FileSaver.saveAs(
               //Blob 对象表示一个不可变、原始数据的类文件对象。
               //Blob 表示的不一定是JavaScript原生格式的数据。
               //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
               //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
               new Blob([wbout], { type: "application/octet-stream" }),
               //设置导出文件名称
               "tableName.xlsx"
           );
       } catch (e) {
           if (typeof console !== "undefined") console.log(e, wbout);
       }
       return wbout;
   }