el-table 多级表头导出(适用于表头固定,表格有固定列)

在使用elementUI组件库开发中,少不了el-table的导出功能,以下是el-table多级表头固定,数据项固定情况下的导出功能!

首先需要安装以下依赖:
在这里插入图片描述
以下是本人依赖版本
el-table 多级表头导出(适用于表头固定,表格有固定列)_第1张图片

html内容

el-table 多级表头导出(适用于表头固定,表格有固定列)_第2张图片

导出获取el-table的dom元素

exportBtn() {
   
	const dom = this.$refs.exportTableRef.$el;//需要导出的dom
	exportDomToXlsx(dom, '...统计分析报表');
},

统一放在工具js文件中util.js

/**
 * 导出成xlsx格式的excel
 * @author JiaBaoYu
 * @date 2022/08/08
 * @param dom 要导出的dom元素
 * @param name 导出文件名称(不含.xlsx)
 */
export function exportDomToXlsx(dom, name) {
   
	let table_book;
	let fix = document.querySelector('.el-table__fixed');
	if(fix){
    //判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
		table_book = XLSX.utils.table_to_sheet(dom.removeChild(fix));
		dom.appendChild(fix);
	}else{
   
		table_book = XLSX.utils.table_to_sheet(dom,{
    raw: true });
	}
	addRangeBorder(table_book['!merges'],table_book)//为导出模板的合并表头项添加边框
	//创建一个workbook对象
	let wb = XLSX.utils.book_new()
	//把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字
	XLSX.utils.book_append_sheet(wb, table_book, name)
	setExlStyle(wb['Sheets'][name]); // 设置列宽 字号等 如果无需多余的样式则省略
	const table_write = xlsxStyle.write(wb, {
    type: 'buffer'})
	try {
   
		FileSaver.saveAs(
		new Blob([table_write], {
    type: 'application/octet-stream' }),
		name + '.xlsx'
		)
	} catch (e) {
   
		console.log(e, table_write)
	}
	return table_write;
}



//为合并项添加边框
export function addRangeBorder(range,ws){
   
   let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", 

你可能感兴趣的:(el-table,导出,vue,elementui,前端,vue.js)