Vue表格导出Excel数据（支持多级表头）

效果图：

1、安装组件库：

npm install file-saver
npm install xlsx
或
yarn add file-saver
yarn add xlsx

本案例使用版本：

npm install [email protected] [email protected]
或
yarn add [email protected] [email protected]

2、单页面引入使用：

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

导出方法：#out-table 是el-table表格节点的id

exportExcel() {
	// this.$TableToExcels.exportExcel('百度地图区域坐标', '#out-table')
	let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
	let wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array"
	});
	FileSaver.saveAs(
		new Blob([wbout], {
			type: "application/octet-stream"
		}),
		"百度地图区域坐标.xlsx"
	);
	return wbout;
}

3、如果el-table使用了fixed属性，导致导出数据重复解决：

var fix_l = document.querySelector('.el-table__fixed'); //fixed 或者 fixed='left'
var fix_r = document.querySelector('.el-table__fixed-right'); //fixed='right'
var wb;
// 以下代码解决table中使用fixed属性导致导出的数据重复问题
if (fix_l) { //判断是否有浮动或者是左浮动
	wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_l));
	document.querySelector(IDName).appendChild(fix_l);
} else if (fix_r) { //判断是否有右浮动
	wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_r));
	document.querySelector(IDName).appendChild(fix_r);
} else if (fix_l && fix_r) { //左右浮动都存在
	wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_l).removeChild(fix_r));
	document.querySelector(IDName).appendChild(fix_l).appendChild(fix_r);
} else { //没有浮动
	wb = XLSX.utils.table_to_book(document.querySelector(IDName))
}

4、封装js文件全局使用，TableToExcel.js

        4.1、TableToExcel.js代码：

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
	// 导出Excel表格
	// name表示生成excel的文件名     IDName表示表格的id
	exportExcel(name, IDName) {
		var fix_l = document.querySelector('.el-table__fixed'); //fixed 或者 fixed='left'
		var fix_r = document.querySelector('.el-table__fixed-right'); //fixed='right'
		var wb;
		// 以下代码解决table中使用fixed属性导致导出的数据重复问题
		if (fix_l) { //判断是否有浮动或者是左浮动
			wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_l));
			document.querySelector(IDName).appendChild(fix_l);
		} else if (fix_r) { //判断是否有右浮动
			wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_r));
			document.querySelector(IDName).appendChild(fix_r);
		} else if (fix_l && fix_r) { //左右浮动都存在
			wb = XLSX.utils.table_to_book(document.querySelector(IDName).removeChild(fix_l).removeChild(fix_r));
			document.querySelector(IDName).appendChild(fix_l).appendChild(fix_r);
		} else { //没有浮动
			wb = XLSX.utils.table_to_book(document.querySelector(IDName))
		}
		// var wb = XLSX.utils.table_to_book(document.querySelector(IDName))
		var wbout = XLSX.write(wb, {
			bookType: 'xlsx',
			bookSST: true,
			type: 'array'
		})
		try {
			FileSaver.saveAs(new Blob([wbout], {
				type: 'application/octet-stream'
			}), `${name}.xlsx`);
		} catch (e) {
			if (typeof console !== 'undefined') console.log(e, wbout)
		}
		return wbout;
	}
}

4.2、全局挂载：main.js

import TableToExcel from '@/utils/TableToExcel';
Vue.prototype.$TableToExcels = TableToExcel

4.3、页面使用：

导出

exportBtn() { //导出
	this.$TableToExcels.exportExcel('百度地图区域坐标', '#out-table')
},

至此结束~

缺点：当前设置全局导出方法只能导出当前页表格数据（没有做分页的没完全可以满足需求）

个人观点解决el-table做了分页处理的情况：

点击导出按钮可以重新获取一次数据为1页9999999条数据，获取成功之后进行导出操作

页面可能存在卡顿现象，可以在导出过程中添加loading操作，或者使用v-show

以上个人观点仅供参考!!!

 自定义表头、样式：Vue表格导出Excel数据，自定义表头，使用xlsx-style修饰