Vue + ElementUI - table 表格数据导出excel文件

Vue + ElementUi- table 表格数据导出excel文件

1. 安装依赖

   // (不推荐) 不指定版本信息安装依赖, 使用时可能会出现XLSX undefined
   // npm install  xlsx --save
   // npm install  file-saver --save
   
   // 推荐使用
   npm install  xlsx@^0.16.9 --save
   npm install  file-saver@^2.0.5 --save
   
   // 卸载本地xlsx
   // npm uninstall xlsx
   

2. 引入组件

   方式一: 局部引入

   // 在需要导出excel的地方引入组件
   import XLSX from 'xlsx'
   import FileSaver from "file-saver"
   

   方式二: 全局引入

   // mian.js 文件中
   import FileSaver from 'file-saver'
   import XLSX from 'xlsx'
     
   Vue.prototype.$FileSaver = FileSaver; //设置全局
   Vue.prototype.$XLSX = XLSX; //设置全局
   

3. 给table添加一个id属性

   <el-button @click="exportResult">导出</el-button>
   
   <!-- 根据实际需求回显数据 -->
   <el-table
        id="resultTable"
        :data="studentList">
       <el-table-column
                 type="index"
                 width="50"
                 label="序号">
       </el-table-column>
       <el-table-column
                 prop="talkScore"
                 label="讨论">
       </el-table-column>
   </el-table>
   

4. 定义导出方法

   /**
    * 导出excel
    * 局部引入: 方法中使用 XLSX FileSaver
    * 全局引入: 方法中的 XLSX FileSaver 替换成 $XLSX $FileSaver
    * 
    * 当前方法中使用的是局部引入
    */
   exportResult() {
         var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
         /* 从表生成工作簿对象 */
         const table_book = XLSX.utils.table_to_book(document.getElementById("resultTable"), xlsxParam);
         /* 获取二进制字符串作为输出 */
         var table_write = XLSX.write(table_book, {
           bookType: "xlsx",
           bookSST: true,
           type: "array",
         });
         try {
           FileSaver.saveAs(
               // Blob 对象表示一个不可变、原始数据的类文件对象。
               // Blob 表示的不一定是JavaScript原生格式的数据。
               // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
               // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
               new Blob([table_write], { type: "application/octet-stream" }),
               // 设置导出文件名称
               "resultSummary.xlsx"
           );
         } catch (e) {
           if (typeof console !== "undefined") console.log(e, table_write);
         }
         return table_write;
       },