项目中遇到了动态合并单元格的复杂表格，用XLSX的book_append_sheet方法还得动态计算合并单元格的信息，太麻烦了。好在这个表格没有分页，无需再次从接口中请求数据，直接可导出。百度了很久，发现了XLSX的另一个方法：table_to_book
1、首先安装依赖
npm i xlsx
npm i file-saver
2、引入依赖
import * as XLSX from 'xlsx'
import {saveAs} from 'file-saver'
3、给要导出的表格元素添加id属性
<div id="tj-summary-table">
<n-data-table
id="summaryTable1"
:columns="columns"
:data="tableData"
:pagination="false"
:single-line="false"
:summary="summary"
:row-class-name="rowClassName"
></n-data-table>
</div>
image.png
4、导出方法
function exportTable() {
const table = document.getElementById('summaryTable1')
if (table) exportExcel(`${props.year}年探井部署年度计划`, table)
}
//非常方便的表格导出功能，直接传入表格对应的HTMLElement即可，合并的单元格会直接保留,仅支持单sheet,仅支持导出展示的表格页
function exportExcel(fileName:string,tableElement:HTMLElement){
const wb = XLSX.utils.table_to_book(tableElement, {raw:true})
const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
saveAs( new Blob([wbout],{type: 'application/octet-stream'}),`${fileName}.xlsx`)
}
5、效果展示
image.png
