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' }) } },