Vue实现在线导出数据到Excel

Vue实现在线导出数据到Excel

.引言：这次给大家带来Vue导出excel表格实例详解，Vue项目纯前端导出数据到Excel，并保存文件到本地。

1. 安装依赖
   在控制台输入
   npm install -S file-saver xlsx
   npm install -D script-loader

2. 引入公用组件js文件
   下载所需的两个文件：Blob.js、Export2Excel.js
   https://download.csdn.net/download/code_carrierV1/13721006
   解压文件夹，vendor文件夹包含两个js文件（Blob.js 和 Export2Excel.js ），把vendor文件夹放到src目录下（vendor可命其他名）
   

3. 修改配置文件
   在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的resolve的alias中加入：

'vendor': path.resolve(__dirname, '../src/vendor')

具体路径根据实际而写，这里是按照我的方式写的路径。

4. 实现代码

 <el-button @click="exportExcel" icon="el-icon-download" size="small" style="margin-left: 10px" type="info">
            导出Excel
          </el-button>

// 这里需先导入
import {export_json_to_excel} from '@/vendor/Export2Excel'
// 导出
exportExcel() {
        if (this.datas.length === 0) {
          this.$message.warning('无数据导出')
          return
        }
        const tHeader = ['状态', '申请单号', '申请人员', '联系电话', '申请部门', '申请日期', '申请类型', '事由']
        const filterVal = ['appStatus', 'appNo', 'userName', 'userTel', 'departmentName', 'appDate', 'appType', 'appReason']
        const list = this.datas
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '申请审核清单')
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }

THeader是Excel的表头部分，filterVal 为实际的字段命名，根据自己项目的字段更改