下載外掛 xlsx，file-saver

npm install xlsx

npm install file-saver

建立 js 檔案，匯入程式碼進行配置

 1 import XLSX from "xlsx"
 2 import { saveAs } from 'file-saver' 
 3 
 4 // 將json資料處理為xlsx需要的格式
 5 function datenum(v, date1904) {
 6     if (date1904) v += 1462
 7     let epoch = Date.parse(v)
 8     return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
 
 9 }
10  
11 function data2ws(data) {
12     const ws = {}
13     const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
14     for (let R = 0; R != data.length; ++R) {
15         for (let C = 0; C != data[R].length; ++C) {
16             if (range.s.r > R) range.s.r = R
17             if (range.s.c > C) range.s.c = C
 
18             if (range.e.r < R) range.e.r = R
19             if (range.e.c < C) range.e.c = C
20             const cell = { v: data[R][C] }
21             if (cell.v == null) continue
22             const cell_ref = XLSX.utils.encode_cell({c: C, r: R})
23  
24             if (typeof cell.v === 'number') cell.t = 'n'
25
 
             else if (typeof cell.v === 'boolean') cell.t = 'b'
26             else if (cell.v instanceof Date) {
27                 cell.t = 'n'
28                 cell.z = XLSX.SSF._table[14]
29                 cell.v = datenum(cell.v)
30             }
31             else cell.t = 's'
32  
33             ws[cell_ref] = cell
34         }
35     }
36     if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
37     return ws
38 }
39 // 匯出Excel
40 function Workbook() {
41     if (!(this instanceof Workbook)) return new Workbook()
42     this.SheetNames = []
43     this.Sheets = {}
44 }
45  
46 function s2ab(s) {
47     const buf = new ArrayBuffer(s.length)
48     const view = new Uint8Array(buf)
49     for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
50     return buf
51 }
52  
53 /*
54 * th => 表頭
55 * data => 資料
56 * fileName => 檔名
57 * fileType => 檔案型別
58 * sheetName => sheet頁名
59 */
60 export default function toExcel ({th, data, fileName, fileType, sheetName}) {
61     data.unshift(th)
62     const wb = new Workbook(), ws = data2ws(data)
63     sheetName = sheetName || 'sheet1'
64     wb.SheetNames.push(sheetName)
65     wb.Sheets[sheetName] = ws
66     fileType = fileType || 'xlsx'
67     var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
68     fileName = fileName || '列表'
69     saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${fileName}.${fileType}`)
70 }

vue頁面直接引入js檔案

import exExcel from '@/utils/exportExcel'

 1 // 自定義匯出
 2     exportExcel() {
 3       this.thDataList = []            // 儲存表頭
 4       this.filterVal = []            // 儲存表單資料
 5       if (this.selectLish.length !== 0) {                    //  判斷選擇框是否選中資料
 6         const dataList = this.selectLish                    // 獲取到當前選擇框選擇到的陣列
 7         for (let i = 0; i < this.columns.length; i++) {            // 陣列迴圈
 8           this.thDataList.push(this.columns[i].label)            // 迴圈得到 el-table中的label值，作為Excel表格的表頭
 9           this.filterVal.push(this.columns[i].prop)                // 迴圈得到 el-table中的porp值， 作為Excel表格的資料
10         }
11         const th = this.thDataList
12         const data = dataList.map(v => this.filterVal.map(k => v[k]))        // 這裡使用資料篩選
13         const [fileName, fileType, sheetName] = ['裝置資料', 'xlsx', '測試頁']            // 這裡的陣列中傳遞三個引數，分別是Excel的檔名稱， Excel的檔案型別字尾， 第三個引數不會顯示，但是必須要存在
14         toExcel({th, data, fileName, fileType, sheetName})                // 最後把資料傳遞過去
15       } else {
16         this.$message({
17           message: '請選擇至少一條資料進行操作！',
18           type: 'warning'
19         })
20       }
21     },
-------------------------------
// columns格式類似於這種