当前位置: 首页 > web >正文

将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题)


import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
/*** 将 Element UI 表格元素导出为 Excel 文件* @param {HTMLElement} el - 要导出的 Element UI 表格的 DOM 元素* @param {string} filename - 导出的 Excel 文件的文件名(不包含扩展名)*/
export function exportElementTable(el, filename) {// 深拷贝表格元素避免污染原始DOMconst clonedEl = el.cloneNode(true)// 移除fixed列容器(避免重复内容)const fixedElements = clonedEl.querySelectorAll('.el-table__fixed, .el-table__fixed-right, .el-table__fixed-left')if (fixedElements && fixedElements.length > 0) {for (let i = 0; i < fixedElements.length; i++) {const fixedEl = fixedElements[i]if (fixedEl.parentNode) {fixedEl.parentNode.removeChild(fixedEl)}}}// 获取原始表头和表体的核心table元素const headerTable = clonedEl.querySelector('.el-table__header-wrapper table')const bodyTable = clonedEl.querySelector('.el-table__body-wrapper table')// 创建新表格容器(保留原始table的class和样式)const mergedTable = document.createElement('table')if (headerTable && headerTable.className) {mergedTable.setAttribute('class', headerTable.className)}// 复制表头结构(关键:保留多级表头的tr层级)if (headerTable) {const thead = document.createElement('thead')const headerRows = headerTable.getElementsByTagName('tr')if (headerRows && headerRows.length > 0) {for (let i = 0; i < headerRows.length; i++) {const tr = headerRows[i]thead.appendChild(tr.cloneNode(true))}}mergedTable.appendChild(thead)}// 复制表体结构(保留数据行)if (bodyTable) {const tbody = document.createElement('tbody')const bodyRows = bodyTable.getElementsByTagName('tr')if (bodyRows && bodyRows.length > 0) {for (let i = 0; i < bodyRows.length; i++) {const tr = bodyRows[i]tbody.appendChild(tr.cloneNode(true))}}mergedTable.appendChild(tbody)}// 关键修复:重新计算并保留合并单元格属性const allCells = mergedTable.getElementsByTagName('th')const dataCells = mergedTable.getElementsByTagName('td')const combinedCells = [].concat(Array.from(allCells), Array.from(dataCells))for (let i = 0; i < combinedCells.length; i++) {const cell = combinedCells[i]if (cell) {const rowSpan = cell.getAttribute('data-rowspan') || 1const colSpan = cell.getAttribute('data-colspan') || 1if (rowSpan > 1) {cell.setAttribute('rowspan', rowSpan)}if (colSpan > 1) {cell.setAttribute('colspan', colSpan)}}}// 转换配置(关键:启用display模式保留表格结构)const workbook = XLSX.utils.table_to_book(mergedTable, {raw: true,display: true, // 启用display模式,正确解析合并单元格和层级cellDates: true, // 保留日期格式(可选)})// 生成并保存文件const wbout = XLSX.write(workbook, {bookType: 'xlsx',bookSST: true,type: 'array',})saveAs(new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }),`${filename}.xlsx`)
}

在这里插入图片描述

http://www.xdnf.cn/news/6763.html

相关文章:

  • DAY 28 类的定义
  • 安全生产调度管理系统的核心功能模块
  • 数学复习笔记 15
  • Ubuntu安装Nginx详细示例
  • mobile预览
  • 初识仓颉编程语言:高效、简洁与创新的编程选择
  • Unity3D 游戏编程内存优化技巧
  • 在MYSQL中导入cookbook.sql文件
  • Java线程池(Thread Pool)性能优化解析
  • 基于摩尔信使MThings的Modbus协议转换效率优化实践
  • 原生小程序+springboot+vue+协同过滤算法的音乐推荐系统(源码+论文+讲解+安装+部署+调试)
  • 报表控件stimulsoft教程:如何在报表和仪表板中创建热图
  • 兰亭妙微设计:为生命科技赋予人性化的交互语言
  • 相机Camera日志分析之九:高通相机Camx 基于预览1帧的ConfigureStreams二级日志分析详解
  • Python OOP核心技巧:如何正确选择实例方法、类方法和静态方法
  • Redis(三) - 使用Java操作Redis详解
  • 非国产算力DeepSeek 部署中的常见问题及解决方案
  • git 修改一个老commit,再把修改应用到所有后续的 commit
  • Go的单测gomock及覆盖率命令
  • 洛谷 P1375:小猫 ← 预处理模逆元 + 卡特兰数
  • nacos配置文件快速部署另一种方法
  • 第十天——贪心算法——深度总结
  • 提高表达能力
  • FC7300 DMA MCAL 配置引导
  • idea 中引入python
  • 无人设备遥控器的信号传输与抗干扰技术
  • 动态图标切换的艺术
  • 软件架构风格系列(1):分层架构如何让系统“稳如泰山”?
  • AI 笔记 -基于retinaface的FPN上采样替换为CARAFE
  • Android framework 中间件开发(一)