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

将 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`)
}

在这里插入图片描述

相关文章:

  • rocketmq 环境配置[python]
  • 7-15 计算圆周率
  • 增量学习:机器学习领域中的资源高效利用秘籍
  • 大语言模型 09 - 从0开始训练GPT 0.25B参数量 补充知识之数据集 Pretrain SFT RLHF
  • C++23 中的 ranges::fold_left:范围折叠算法
  • C语言进阶-数组和函数
  • 深入解析Spring Boot与微服务架构:从入门到实践
  • 智能呼叫系统中的NLP意图理解:核心技术解析与实战
  • Android 中 打开文件选择器(ACTION_OPEN_DOCUMENT )
  • 基于React的高德地图api教程005:圆形标记的绘制、删除、修改
  • 0-INViT:一个具有不变嵌套视图Transformer的可推广路由问题求解器(code)(未完)
  • GDB 高级调试技术深度解析
  • 【Python+flask+mysql】网易云数据可视化分析(全网首发)
  • STM32F103经SPI总线向写Micro SD卡
  • 怎么使用python进行PostgreSQL 数据库连接?
  • Web性能优化的未来:边缘计算、AI与新型渲染架构
  • WebMvcConfigurer介绍-笔记
  • 算法刷题(Java与Python)1.二分查找
  • 车道线检测----CLRERNet
  • 【云实验】基于对象存储OSS实现企业门户网站托管
  • 下辖各区密集“联手”,南京在下一盘什么样的棋?
  • 国际乒联主席索林:洛杉矶奥运会增设混团是里程碑事件
  • 广西壮族自治区党委副书记、自治区政府主席蓝天立接受审查调查
  • 艺术稀缺性和价值坚守如何构筑品牌差异化壁垒?从“心邸”看CINDY CHAO的破局之道
  • 微软宣布全球裁员约3%:涉及约6000人,侧重经理层
  • 人民日报:从“轻微免罚”看涉企执法方式转变