1. 程式人生 > 其它 >vue-element-admin table表格匯出(含踩坑)

vue-element-admin table表格匯出(含踩坑)

步驟一:安裝外掛

npm install xlsx file-saver -S

npm install script-loader -S -D

步驟二:在src新建目錄vendor

在vendor新建檔案Export2Excel.js

然後將連結中的程式碼複製到Export2Excel.js

https://github.com/PanJiaChen/vue-element-admin/edit/master/src/vendor/Export2Excel.js

注意:作者用的import 匯入,在我的專案中列印XLSX一直是undefined,所以我用了下面的方式

import { saveAs } from 'file-saver' // import XLSX from 'xlsx'  const XLSX = require('xlsx');
  步驟三:在vue中使用   methods: {     exporfFile(){         import('@/vendor/Export2Excel').then(excel => {             // 匯出的表頭名資訊,也就是選中列             const tHeader = [                 '序號',                 '企業名稱',                 '區縣',                 '管理類別',                 '行業類別',                 '申請型別',                 '開始時間',                 '結束時間',                 '時長',             ]             // 匯出的表頭欄位名,需要匯出表格欄位名             const filterVal = [                 'index',                 'devcompany',                 'name_regiondetail',                 'management',                 'hyname',                 'itemtype',                 'start_time',                 'end_time',                 'time',             ]
            //匯出時如果需要序列,增加序列。             this.tableData1.forEach((item, index) => {                 item.index = index + 1             })             const list = this.tableData1             const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({                 header: tHeader, //表頭 必填                 data, //具體資料 必填,欄位名必須用data                 filename: 'excel-list', //非必填,自定義                 autoWidth: true, //非必填                 bookType: 'xlsx' //非必填             })         })     },     //處理資料格式將[{}……]處理為@/vendor/Export2Excel需要的[[]……]格式     formatJson
(filterVal, jsonData) {         return jsonData.map((v) => filterVal.map((j) => v[j]))     }, }       注意:陣列的格式為陣列套陣列,且tHeader 元素的數量要和data中列的數量一致,且傳遞時注意,上面物件中橙色的屬性data,一定要用'data'這個欄位名,否則傳遞過去是undefined。   data的格式如下: [

[1, '標題一 'George',111]

[2, '標題二', 'John', 2614,]

[3, '標題三', 'Jennifer', 4787, ]

]