vue把table导出为表格 elementUI

使用 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);
                }