el-table表格点击选择框导出Excel表格

下载插件 xlsx，file-saver

npm install xlsx

npm install file-saver

创建 js 文件，导入代码进行配置

import XLSX from "xlsx"
import { saveAs } from 'file-saver' 

// 将json数据处理为xlsx需要的格式
function datenum(v, date1904) {
    if (date1904) v += 1462
    let epoch = Date.parse(v)
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}
 
function data2ws(data) {
    const ws = {}
    const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
    for (let R = 0; R != data.length; ++R) {
        for (let C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R
            if (range.s.c > C) range.s.c = C
            if (range.e.r < R) range.e.r = R
            if (range.e.c < C) range.e.c = C
            const cell = { v: data[R][C] }
            if (cell.v == null) continue
            const cell_ref = XLSX.utils.encode_cell({c: C, r: R})
 
            if (typeof cell.v === 'number') cell.t = 'n'
            else if (typeof cell.v === 'boolean') cell.t = 'b'
            else if (cell.v instanceof Date) {
                cell.t = 'n'
                cell.z = XLSX.SSF._table[14]
                cell.v = datenum(cell.v)
            }
            else cell.t = 's'
 
            ws[cell_ref] = cell
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
    return ws
}
// 导出Excel
function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook()
    this.SheetNames = []
    this.Sheets = {}
}
 
function s2ab(s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
}
 
/*
* th => 表头
* data => 数据
* fileName => 文件名
* fileType => 文件类型
* sheetName => sheet页名
*/
export default function toExcel ({th, data, fileName, fileType, sheetName}) {
    data.unshift(th)
    const wb = new Workbook(), ws = data2ws(data)
    sheetName = sheetName || 'sheet1'
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    fileType = fileType || 'xlsx'
    var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
    fileName = fileName || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${fileName}.${fileType}`)
}

vue页面直接引入js文件

import toExcel from '@/utils/json2excel' 

<el-button icon="el-icon-download"  @click="exportExcel">Excel 导出</el-button>

 // 自定义导出
    exportExcel() {
      this.thDataList = []			// 存储表头
      this.filterVal = []			// 存储表单数据
      if (this.getSelectRows().length !== 0) {					//  判断选择框是否选中数据
        const dataList = this.getSelectRows()					// 获取到当前选择框选择到的数组
        for (let i = 0; i < this.columns.length; i++) {			// 数组循环
          this.thDataList.push(this.columns[i].label)			// 循环得到 el-table中的label值，作为Excel表格的表头
          this.filterVal.push(this.columns[i].prop)				// 循环得到 el-table中的porp值， 作为Excel表格的数据
        }
        const th = this.thDataList
        const data = dataList.map(v => this.filterVal.map(k => v[k]))		// 这里使用数据筛选
        const [fileName, fileType, sheetName] = ['设备数据', 'xlsx', '测试页']			// 这里的数组中传递三个参数，分别是Excel的文件名称， Excel的文件类型后缀， 第三个参数不会显示，但是必须要存在
        toExcel({th, data, fileName, fileType, sheetName})				// 最后把数据传递过去
      } else {
        this.$message({
          message: '请选择至少一条数据进行操作！',
          type: 'warning'
        })
      }
    },