VUE element-ui 之table表格导出Excel（自定义表头+自定义导出字段内容）

浅浅的花香味﹌ 2023-01-17 07:35 309阅读 0赞

## **导出excel自定义表头及自定义字段步骤：** ##

**1.安装依赖**

npm install --save xlsx file-saver
    npm install -D script-loader

**2.下载Blob.js、export2Excel.js**  
百度网盘链接：[https://pan.baidu.com/s/1iC1kWX5jd7U5J9g\_L4BQ2Q][https_pan.baidu.com_s_1iC1kWX5jd7U5J9g_L4BQ2Q]  
提取码: 3kv4  
src下创建excel文件夹将Blob.js、export2Excel.js放入  
**3.添加导出按钮**

<el-button round class="exportExcel1" @click="doExport">导出Excel</el-button>

**4.js方法**

// 导出
        doExport() { 
          this.excelData = this.tableData 
          this.export2Excel() 
        },
        // 数据写入excel
        export2Excel() { 
          var that = this
          require.ensure([], () => { 
            const {  export_json_to_excel } = require('@/excel/export2Excel') // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
            const tHeader = ['日期', '交易量区间/吨', '人数/个', '交易量/吨', '区间内交易量/吨', '交易量占比/%'] // 导出的excel的表头字段可自定义
            const filterVal = ['create_time', 'sale_interval', 'num', 'totalTon', 'totalTonAver', 'totalTonRatio'] // 对象属性，对应于tHeader，即prop的值，可自定义导出字段
            const list = that.excelData // json数组对象，接口返回的数据
            const data = that.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, 'xxxx')// 导出的表格名称，可自定义
          })
        },
        // 格式转换
        formatJson(filterVal, jsonData) { 
          return jsonData.map(v => filterVal.map(j => v[j]))
        }

[https_pan.baidu.com_s_1iC1kWX5jd7U5J9g_L4BQ2Q]: https://pan.baidu.com/s/1iC1kWX5jd7U5J9g_L4BQ2Q