项目中表格展示:
导出后的效果:
只需在vue中引入 (先npm 安装)
import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’
在导出的表格中使用ref绑定
方法调用
// 导出
outTab() {
let fix = document.querySelector('.el-table__fixed');
let wb;
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
document.querySelector("#out-table").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
}
// / get binary string as output
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), '出纳收款日报表.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout;
// /* generate workbook object from table */
// let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
// /* get binary string as output */
// let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
// try {
// FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '出纳收款日报表.xlsx')
// } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
// return wbout
},