我使用的是Element UI框架的表格没有测试普通表格。
第一步我们先安装一下这两个包file-saver,xlsx
npm i file-saver
npm i xlsx
第二步引入在main.js里
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
第三步挂载上
app.config.globalProperties.$FileSaver = FileSaver //设置全局
app.config.globalProperties.$XLSX = XLSX //设置全局
第四步就是在使用表格的地方写方法、
exportData() {
let excelName = '某.xlsx';//想要导出的文件名
var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
// 克隆节点
let tables = document.getElementById("out-table").cloneNode(true);
// 判断是否为固定列,解决(为固定列时,会重复生成表格)
//把想要导出的table的id修改一下
if (tables.querySelector('.el-table__fixed') !== null) {
tables.removeChild(tables.querySelector('.el-table__fixed'))
}
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
var table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
excelName
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
不过如果表格中插入输入框好像导不出数据(我使用的时候是这样的),我的解决办法是重新写一个表格用v-show的形式隐藏起来 然后导出。