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

news2025/5/17 6:22:55

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) {
  // 深拷贝表格元素避免污染原始DOM
  const 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') || 1
      const colSpan = cell.getAttribute('data-colspan') || 1
      if (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.coloradmin.cn/o/2377405.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux网络】 HTTP cookie与session

HTTP cookie与session 引入HTTP Cookie 定义 HTTP Cookie&#xff08;也称为Web Cookie、浏览器Cookie或简称Cookie&#xff09;是服务器发送到用户浏览器并保存在浏览器上的一小块数据&#xff0c;它会在浏览器之后向同一服务器再次发起请求时被携带并发送到服务器上。通常&…

OrangePi Zero 3学习笔记(Android篇)11 - IR遥控器

目录 1. 查询IR信息 1.1.1 sunxi-ir-uinput 1.1.2 sunxi-ir 2. 调试键值 3. 匹配遥控器 4. Power键的特殊处理 5. 验证 ir的接口在13pin接口上&#xff0c;需要使用到扩展板。 1. 查询IR信息 在shell的界面输入命令&#xff1a; dumpsys input 分析返回信息&#xf…

【蓝桥杯省赛真题49】python偶数 第十五届蓝桥杯青少组Python编程省赛真题解析

python偶数 第十五届蓝桥杯青少组python比赛省赛真题详细解析 博主推荐 所有考级比赛学习相关资料合集【推荐收藏】1、Python比赛 信息素养大赛Python编程挑战赛 蓝桥杯python选拔赛真题详解

突发,苹果发布下一代 CarPlay Ultra

汽车的平均换代周期一般都超过5年&#xff0c;对于老旧燃油车而言&#xff0c;苹果的 Carplay 是黑暗中的明灯&#xff0c;是延续使用寿命的利器。 因为你可能不需要冰箱彩电大沙发&#xff0c;但一定需要大屏车载导航、倒车影像、车载听歌。如果原车不具备这个功能&#xff0…

Axure设计的“广东省网络信息化大数据平台”数据可视化大屏

在数据驱动决策的时代&#xff0c;数据可视化大屏成为了展示数据、洞察趋势的重要工具。今天&#xff0c;让我们一同深入了解由Axure设计的“广东省网络信息化大数据平台”数据可视化大屏&#xff0c;看看它如何通过精心的布局和丰富的图表类型&#xff0c;将复杂的数据以直观易…

2025认证杯数学建模第二阶段C题完整论文(代码齐全)化工厂生产流程的预测和控制

2025认证杯数学建模第二阶段C题完整论文&#xff08;代码齐全&#xff09;化工厂生产流程的预测和控制&#xff0c;详细信息见文末名片 第二阶段问题 1 分析 在第二阶段问题 1 中&#xff0c;由于在真实反应流程中输入反应物的量改变后&#xff0c;输出产物会有一定延时&#…

Redis——底层数据结构

SDS&#xff08;simple dynamic string&#xff09;&#xff1a; 优点&#xff1a; O1时间获取长度&#xff08;char *需要ON&#xff09;快速计算剩余空间&#xff08;alloc-len&#xff09;&#xff0c;拼接时根据所需空间自动扩容&#xff0c;避免缓存区溢出&#xff08;ch…

ChatGPT 能“记住上文”的原因

原因如下 你把对话历史传给了它 每次调用 OpenAI 接口时&#xff0c;都会把之前的对话作为参数传入&#xff08;messages 列表&#xff09;&#xff0c;模型“看见”了之前你说了什么。 它没有长期记忆 它不会自动记住你是谁或你说过什么&#xff0c;除非你手动保存历史并再次…

大疆无人机自主飞行解决方案局限性及增强解决方案-AIBOX:特色行业无人机巡检解决方案

大疆无人机自主飞行解决方案局限性及增强解决方案-AIBOX&#xff1a;特色行业无人机巡检解决方案 大疆无人机是低空行业无人机最具性价比的产品&#xff0c;尤其是大疆机场3的推出&#xff0c;以及持续自身产品升级迭代&#xff0c;包括司空2、大疆智图以及大疆智运等专业软件和…

医学影像系统性能优化与调试技术:深度剖析与实践指南

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…

day 25

*被遗忘的一集 程序&#xff1a;二进制文件&#xff0c;文件存储在磁盘中&#xff0c;例如/usr/bin/目录下 进程&#xff1a;进程是已启动的可执行程序的运行实例。 *进程和程序并不是一一对应的关系&#xff0c;相同的程序运行在不同的数据集上就是不同的进程 *进程还具有并…

吉客云数据集成到金蝶云星空的最佳实践

吉客云数据集成到金蝶云星空的技术案例分享 在本次技术案例中&#xff0c;我们将探讨如何通过仓库方案-I0132&#xff0c;将吉客云的数据高效集成到金蝶云星空。此方案旨在解决企业在数据对接过程中遇到的多种技术挑战&#xff0c;包括数据吞吐量、实时监控、异常处理和数据格…

使用Mathematica制作Lorenz吸引子的轨道追踪视频

Lorenz奇异吸引子是混沌理论中最早被发现和研究的吸引子之一&#xff0c;它由Edward Lorenz在1963年研究确定性非周期流时提出。Lorenz吸引子以其独特的"蝴蝶"形状而闻名&#xff0c;是混沌系统和非线性动力学的经典例子。 L NDSolveValue[{x[t] -3 (x[t] - y[t]),…

简单图像自适应亮度对比度调整

一、背景介绍 继续在刷对比度调整相关算法&#xff0c;偶然间发现了这个简单的亮度/对比度自适应调整算法&#xff0c;做个简单笔记记录。也许后面用得到。 二、自适应亮度调整 1、基本原理 方法来自论文:Adaptive Local Tone Mapping Based on Retinex for High Dynamic Ran…

深入理解二叉树:遍历、存储与算法实现

在之前的博客系列中&#xff0c;我们系统地探讨了多种线性表数据结构&#xff0c;包括顺序表、栈和队列等经典结构&#xff0c;并通过代码实现了它们的核心功能。从今天开始&#xff0c;我们将开启一个全新的数据结构篇章——树结构。与之前讨论的线性结构不同&#xff0c;树形…

【Win32 API】 lstrcmpA()

作用 比较两个字符字符串&#xff08;比较区分大小写&#xff09;。 lstrcmp 函数通过从第一个字符开始检查&#xff0c;若相等&#xff0c;则检查下一个&#xff0c;直到找到不相等或到达字符串的末尾。 函数 int lstrcmpA(LPCSTR lpString1, LPCSTR lpString2); 参数 lpStr…

(C语言)超市管理系统 (正式版)(指针)(数据结构)(清屏操作)(文件读写)

目录 前言&#xff1a; 源代码&#xff1a; product.h product.c fileio.h fileio.c main.c 代码解析&#xff1a; 一、程序结构概述 二、product.c 函数详解 1. 初始化商品列表 Init_products 2. 添加商品 add_product 3. 显示商品 display_products 4. 修改商品 mo…

NAT转换和ICMP

NAT nat原理示意 nat实现 ICMP ICMP支持主机或路由器&#xff1a; 差错或异常报告网络探寻 2类icmp报文&#xff1a; 差错报告报文&#xff08;5种&#xff09; 目的不可达源抑制--拥塞控制超时&超期--TTL超时参数问题--问题报文丢弃重定向--不应该由这个路由器转发&a…

【专利信息服务平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

BUUCTF——web刷题第一页题解

共31题&#xff0c;admin那题没有&#xff0c;因为环境问题&#xff0c;我做的非常卡 目录 极客大挑战 2019]Havefun [HCTF 2018]WarmU [ACTF2020 新生赛]Include [ACTF2020 新生赛]Exec [GXYCTF2019]Ping Ping Ping [SUCTF 2019]EasySQL [极客大挑战 2019]LoveSQL [极…