- 第一步: 安装 file-saver 和 xlsx
cnpm i file-saver xlsx -s
- 第二步: 在要用的组件用中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 为表格绑定一个id, 特别注意
<el-table
id="table"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
- 第三步:书写方法
getcsv() {
let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
/* #table 就是表格的id */
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
},
// 为按钮绑定这个事件就可以了