2023-09-26 不分页的表格导出excel

项目中遇到了动态合并单元格的复杂表格，用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