使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui。
首先要安装两个包:XLSX,file-saver
xlsx 官方文档(英文):xlsx
npm install --save xlsx
一导出原生表格
<table class="tablebox" id="table">...</table>/*原生 表格*/
<el-table id="table">...</el-table>/*elementui 表格*/
/*以上表格均可导出*/
//添加点击事件
<el-botton @click="export">export</el-button>
// script
import XLSX from 'xlsx'
...
methods:{
export() {
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');
/*sheet为工作表名称*/
// 以上四行也可以直接一行搞定,如果不需要对表格数据进行修改的话
let workbook = XLSX.utils.table_to_book(document.getElementById('table'))
try {
XLSX.writeFile(workbook, 'text.xlsx');
} carch(e) {
console.log(e, workbook);
}
}
}
一个excel多个工作表
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let table2 = document.getElementById('table2');
let worksheet2 = XLSX.utils.table_to_sheet(table2);
let table3 = document.getElementById('table3');
let worksheet3 = XLSX.utils.table_to_sheet(table3);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '会员收入');
XLSX.utils.book_append_sheet(workbook, worksheet2, '场地收入');
XLSX.utils.book_append_sheet(workbook, worksheet3, '商品收入');
// 以上四行也可以直接一行搞定,如果不需要对表格数据进行修改的话
/* let workbook = XLSX.utils.table_to_book(document.getElementById('table')) */
try {
XLSX.writeFile(workbook, '收入统计.xlsx');
}
catch(e) {
console.log(e, workbook);
}