前端实现多级表头导出功能

安装file-saver

npm install file-saver --save

引入

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

定义导出的多级表格DOM对象

<template>
	<el-table v-show='notation.show_export' id='table_export_excel_all' :data='notation.data_export'
     height='250'
     style='width: 100%'>
     	<el-table-column label='用户信息'>
			<el-table-column label='姓名'  prop='name'></el-table-column>
			<el-table-column label='出生日期'  prop='date'></el-table-column>
			<el-table-column label='年龄'  prop='age'></el-table-column>
		</el-table-column>
     	<el-table-column label='账号信息'>
     		<el-table-column label='用户名'  prop='username'></el-table-column>
			<el-table-column label='密码'  prop='password'></el-table-column>
			<el-table-column label='昵称'  prop='nickname'></el-table-column>
     	</el-table-column>
     </el-table>
</template>


......
data(){
	return {
		notation:{
			show_export: false,               //DOM对象的显示隐藏，由于导出dom不需要显示只作导出模板使用所以该值为false
			data_export: [ ],                 //存储数据的数组
			uncheckList_export: {             //控制自定义列的显示隐藏
				name: false,
				date: false,
				age: false,
				username: false,
				password: false,
				nickname: false,
			}
		}
	}
}

具体可以根据自己的表格定义导出的多级表格dom对象。

获取导出数据

我们定义了存储数据的data_export数组，只需要调用接口将数据存储到这个数组渲染到导出的DOM对象中。

导出多级表格的方法

在上面我们定义了导出的dom对象，只需要在点击导出按钮时调用导出方法就可以导出对应的多级dom表格，可以使用document.querySelector（）方法根据id获取到对应的dom对象进行导出，导出方法如下

exportExcel_dom(filename, tableId) {
        var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
        var table = document.querySelector('#' + tableId).cloneNode(true);

		table.removeChild(table.querySelector(".el-table__fixed"))  //如果表格使用了固定定位可能会导致导出两次重复数据，需要加移出掉多出的table

        var wb = XLSX.utils.table_to_book(table, xlsxParam);
        /* 获取二进制字符进行输出 */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            filename + '.xlsx'
          );
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout);
          }
        }
        return wbout;
      }

这种方法使用自定义列导出所选列的内容时，可以通过v-if控制导出DOM对象的显示隐藏比较方便。

<el-table v-show='notation.show_export' id='table_export_excel_all' :data='notation.data_export'
     height='250'
     style='width: 100%'>
     	<el-table-column label='用户信息'>
			<el-table-column v-if="uncheckList_export.name" label='姓名'  prop='name'></el-table-column>
			<el-table-column v-if="uncheckList_export.date" label='出生日期'  prop='date'></el-table-column>
			<el-table-column v-if="uncheckList_export.age" label='年龄'  prop='age'></el-table-column>
		</el-table-column>
     	<el-table-column label='账号信息'>
     		<el-table-column v-if="uncheckList_export.username" label='用户名'  prop='username'></el-table-column>
			<el-table-column v-if="uncheckList_export.password" label='密码'  prop='password'></el-table-column>
			<el-table-column v-if="uncheckList_export.nickname" label='昵称'  prop='nickname'></el-table-column>
     	</el-table-column>
     </el-table>

还有一种方法通过v-if控制显示隐藏时不生效，暂未找到解决方法。

另一种方法可以参考链接 https://www.lmlphp.com/user/73485/article/item/2642508/