ElementUI 本身并不提供以文件流的形式导出数据的功能,但可以借助其他第三方库来实现。以下是一种实现方式:
- 首先,安装并引入
xlsx
库npm install xlsx import XLSX from 'xlsx'
- 创建导出函数,该函数接收两个参数:数据和文件名
//导出操作 //该操作需要在前端里面<el-table>里面加入ref="table" exportDataToExcel(data, filename) { // 1. 获取表头 const headerRow = Array.from( this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th') ); const labelValues = headerRow.map((header) => { return header.textContent.trim(); // 使用textContent获取表头文本 }); // 去除数组里面是空的 let newList = labelValues.filter(item => item !== ""); // 2. 获取数据 const dataArray = data.map((obj) => Object.values(obj).filter((value) => typeof value !== 'object') ); dataArray.unshift(newList); // 3. 导出Excel const worksheet = XLSX.utils.aoa_to_sheet(dataArray); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); XLSX.writeFile(workbook, filename); },
- 在需要导出数据的地方调用该函数
//全部数据导出 exportAllData(){ listMzlExportAllData().then((response)=>{ const resp = response.data this.exportDataToExcel(resp, '订单明细.xlsx') }) },