前端 vue 项目中导出 table 为 excel 表格
背景介绍:
使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui。
首先要安装两个包:XLSX,file-saver
xlsx 官方文档(英文):xlsx
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;
}
}
更新:2019/3/28
发现只用 XLSX 一个包就可以了。 因此只需安装 xlsx:npm install --save xlsx
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
// 以上四行也可以直接一行搞定,如果不需要对表格数据进行修改的话
let workbook = XLSX.utils.table_to_book(document.getElementById('table'))
try {
XLSX.writeFile(workbook, 'text.xlsx');
} carch(e) {
console.log(e, workbook);
}
更加简洁有木有!
另外附上xlsx常用的方法:
XLSX.utils.sheet_to_csv
generates CSV
XLSX.utils.sheet_to_txt
generates UTF16 Formatted Text
XLSX.utils.sheet_to_html
generates HTML
XLSX.utils.sheet_to_json
generates an array of objects
XLSX.utils.sheet_to_formulae
generates a list of formulae