在 Vue 中,要导出 el-table 中的数据为 Excel 格式,可以使用一些第三方库,如 file-saver 和 xlsx。具体步骤如下:
第一步
安装 file-saver 和 xlsx 库:
npm install --save xlsx file-saver
第二步
在需要导出数据的组件中引入这两个库:
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
第三步
在 el-table 中添加一个 id属性,
<el-table class="el-table" id="exportTable" :data="tableData" ...>
<!-- 表格列定义 -->
</el-table>
第四步
添加一个按钮或链接,用于触发导出事件,并在事件处理程序中编写代码:
<el-button type="danger" size="small" @click=" exportToExcel()">导出<el-icon class="el-icon--right">
<upload />
</el-icon>
</el-button>
第五步
在methods中写入方法
exportToExcel() {
const XLSX = require('xlsx')
console.log('XLSX', XLSX, FileSaver)
// 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
this.$nextTick(function () {
// 设置导出的内容是否只做解析,不进行格式转换 false:要解析, true:不解析
const xlsxParam = { raw: true }
const wb = XLSX.utils.table_to_book(document.querySelector('#exportTable'), xlsxParam)
// 导出excel文件名
let fileName = '牛只数据表' + new Date().getTime() + '.xlsx'
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
// 下载保存文件
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
})
},