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

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

在这里插入图片描述

相关文章:

将 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 文件的文件名&#xff08;不包含扩展名&#xff09;*/ ex…...

Android Development Roadmap

&#x1f527; Android Development Roadmap (Practical First → Theory Later) Here’s a lean, real-world roadmap tailored to the mindset — build-first, theory-when-needed: &#x1f7e2; Stage 1: Core Setup & Workflow (Done ✅) ✅ Install Android Studio…...

【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…...

uniapp实现在线pdf预览以及下载

uniapp实现在线pdf预览以及下载 在线预览 遇到的问题 后端返回一个url地址&#xff0c;我需要将在在页面中渲染出来。因为在浏览器栏上我输入url地址就可以直接预览pdf文件&#xff0c;因此直接的想法是通过web-view组件直接渲染。有什么问题呢&#xff1f;在h5端能够正常渲…...

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

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

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

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

鸿蒙OSUniApp开发富文本编辑器组件#三方框架 #Uniapp

使用UniApp开发富文本编辑器组件 富文本编辑在各类应用中非常常见&#xff0c;无论是内容创作平台还是社交软件&#xff0c;都需要提供良好的富文本编辑体验。本文记录了我使用UniApp开发一个跨平台富文本编辑器组件的过程&#xff0c;希望对有类似需求的开发者有所启发。 背景…...

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;包括数据吞吐量、实时监控、异常处理和数据格…...

【Spark】-- DAG 和宽窄依赖的核心

目录 Spark DAG 和宽窄依赖的核心 一、什么是 DAG? 示例:WordCount 程序的 DAG 二、宽依赖与窄依赖 1. 窄依赖 2. 宽依赖 三、DAG 与宽窄依赖的性能优化 1. 减少 Shuffle 操作 2. 合理划分 Stage 3. 使用缓存机制 四、实际案例分析:同行车判断 五、总结 Spark D…...

原生的 XMLHttpRequest 和基于 jQuery 的 $.ajax 方法的异同之处以及使用场景

近期参与一个项目的开发&#xff0c;发现项目中的ajax请求有两种不同的写法&#xff0c;查询了下两种写法的异同之处以及使用场景。 下面将从以下两段简单代码进行异同之处的分析及使用场景的介绍&#xff1a; // 写法一&#xff1a; var xhr new XMLHttpRequest(); xhr.open…...

快速选择算法:优化大数据中的 Top-K 问题

在处理海量数据时&#xff0c;经常会遇到这样的需求&#xff1a;找出数据中最大的前 K 个数&#xff0c;而不必对整个数据集进行排序。这种场景下&#xff0c;快速选择算法&#xff08;Quickselect&#xff09;就成了一个非常高效的解决方案。本文将通过一个 C 实现的快速选择算…...

使用Frp搭建内网穿透,外网也可以访问本地电脑。

一、准备 1、服务器&#xff1a;需要一台外网可以访问的服务器&#xff0c;不在乎配置&#xff0c;宽带好就行。我用的是linux服务器。&#xff08;一般买一个1核1g的云服务器就行&#xff09;&#xff0c;因为配置高的服务器贵&#xff0c;所以这是个择中办法。 2、客户端&a…...

【RabbitMQ】消息丢失问题排查与解决

RabbitMQ 消息丢失是一个常见的问题&#xff0c;可能发生在消息的生产、传输、消费或 Broker 端等多个环节。消息丢失的常见原因及对应的解决方案&#xff1a; 一、消息丢失的常见原因 1. 生产端&#xff08;Producer&#xff09;原因 (1) 消息未持久化 原因&#xff1a;生产…...

电子电路:被动电子元件都有哪些?

在电子电路中,被动元件(Passive Components)是指不需要外部电源即可工作且不具备信号放大或能量控制能力的元件。它们主要通过消耗、存储或传递能量来调节电路的电流、电压、频率等特性。以下是常见的被动元件及其核心作用: 一、基础被动元件 1. 电阻(Resistor) 功能:限…...

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

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

深入解析VPN技术原理:安全网络的护航者

在当今信息化迅速发展的时代&#xff0c;虚拟私人网络&#xff08;VPN&#xff09;技术成为了我们在互联网时代保护隐私和数据安全的重要工具。VPN通过为用户与网络之间建立一条加密的安全通道&#xff0c;确保了通讯的私密性与完整性。本文将深入解析VPN的技术原理、工作机制以…...

JavaScript性能优化实战(10):前端框架性能优化深度解析

引言 React、Vue、Angular等框架虽然提供了强大的抽象和开发效率,但不恰当的使用方式会导致严重的性能问题,针对这些问题,本文将深入探讨前端框架性能优化的核心技术和最佳实践。 React性能优化核心技术 React通过虚拟DOM和高效的渲染机制提供了出色的性能,但当应用规模…...

(for 循环) VS (LINQ) 性能比拼 ——c#

在大多数情况下&#xff0c;for 循环的原始性能会优于 LINQ&#xff0c;尤其是在处理简单遍历、数据筛选或属性提取等场景时。这是由两者的实现机制和抽象层次决定的。以下是具体分析&#xff1a; 一、for 循环与 LINQ 的性能差异原因 1. 抽象层次与执行机制 for 循环&#…...

《Spring Boot 4.0新特性深度解析》

Spring Boot 4.0的发布标志着Java生态向云原生与开发效能革命的全面迈进。作为企业级应用开发的事实标准框架&#xff0c;此次升级在运行时性能、云原生支持、开发者体验及生态兼容性四大维度实现突破性创新。本文深度解析其核心技术特性&#xff0c;涵盖GraalVM原生镜像支持、…...

【大模型面试每日一题】Day 20:大模型出现“幻觉”(Hallucination)的可能原因有哪些?如何从数据或训练层面缓解?

【大模型面试每日一题】Day 20&#xff1a;大模型出现“幻觉”&#xff08;Hallucination&#xff09;的可能原因有哪些&#xff1f;如何从数据或训练层面缓解&#xff1f; &#x1f4cc; 题目重现 &#x1f31f;&#x1f31f; 面试官&#xff1a;大模型出现“幻觉”&#xf…...

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

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

CompletableFuture统计任务

ApiOperation(value "首页统计")GetMapping("/statistics")public UnifyResponse<List<BusinessStatisticsVO>> statistics() throws Exception {StatisticsPermissionQuery permissionQuery getPermission();ThreadPoolExecutor executor …...