背景介绍:
使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui。
首先要安装两个包:XLSX,file-saver
npm install --save xlsx file-saver
现在有一个按钮,和一个表格,点击按钮发生导出表格的事件。
// template
<el-botton @click="export">export</el-button>
<el-table id="table">...</el-table>
// script
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
...
methods:{
export() {
let table = document.getElementById('table');
let workboodout = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array'});
try {
FileSaver.saveAs(new Blob([workboodout], { type: 'application/octet-stream'}), 'table.xlsx');
// table.xlsx 为导出的文件名,可自定义
} catch (e) {
console.log(e, workboodout);
}
return workboodout;
}
}