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

使用html2canvas转换table为图片时合并单元格rowspan失效，无边框显示问题解决（React实现）

news 2026/4/2 21:55:07

最近使用 html2canvas导出Table表单为图片，但是转换出的图片被合并的单元格没有显示边框

查了原因是因为我为tr设置了背景色，然后td设置了rowspan，设置了rowspan的单元格就会出现边框不显示的问题。

解决方法就是取消tr的背景色，然后在td里设置背景色，

或者把tr的背景色设置为透明，在td里设置背景色（对于使用了第三方表单的Table组件）-如果用的组件table，tr的背景色也是组件设置的。所以tr样式用这个覆盖background-color: transparent;，再设置单元格的background-color

最后就正常显示了，可以打印了

 

实现代码：

// 生成图片快照 DOM nodes convert to PNGconst saveImage = async () => {const canvas = await html2canvas(document.getElementById('capture'),{scale:2})const link = document?.createElement('a')link.download = `标签${data?.wastesName != null ? '-' : ''}${data?.wastesName??''}.png`link.href = canvas.toDataURL('image/png')link?.click()}/*** 打印及关闭窗口* @param printWindow Windows对象*/const openPrint = async (printWindow: any) => {await printWindow?.print();printWindow?.close()}/*** 打印*/const handlePrint = async () => {const canvas = await html2canvas(document.getElementById('capture'),{scale:2})const printWindow = window?.open('', '_blank');printWindow?.document?.open();printWindow?.document?.write('<html lang="zh"><head><title>打印</title></head><body>');printWindow?.document?.write('<img src="' + canvas.toDataURL('image/png') + '" style="width:100%" alt="">');printWindow?.document?.write('</body></html>');printWindow?.document?.close();// 在整个HTML文档加载完成后执行的操作printWindow.onload = () => openPrint(printWindow)};

当然你也可以用另一个库实现，我之前写了另一个库的实现方式，这个库在复制dom元素时会用到浏览器Window对象，但我们这套前端框架是通过微前端构建的，子应用中的Window对象被沙箱隔离了，无法使用Window对象的部分原生方法，所以我才转用html2canvas库的，该库中没用到Window对象，所以可以使用，但方便的还是HTML-to-image，使用链接：JavaScript实现React实现网页转换成图片截屏下载_react截取页面保存为图片到手机相册-CSDN博客

参考文献：

0、Features | html2canvas 

1、html2canvas 踩坑记录一_html2canvas导出table rowspan失效-CSDN博客 

相关文章：

使用html2canvas转换table为图片时合并单元格rowspan失效，无边框显示问题解决（React实现）

最近使用 html2canvas导出Table表单为图片&#xff0c;但是转换出的图片被合并的单元格没有显示边框 查了原因是因为我为tr设置了背景色&#xff0c;然后td设置了rowspan&#xff0c;设置了rowspan的单元格就会出现边框不显示的问题。 解决方法就是取消tr的背景色&#xff0c;然…...

编程日记 2023/11/19 16:32:25

pandas教程：Time Series Basics 时间序列基础

文章目录 11.2 Time Series Basics&#xff08;时间序列基础&#xff09;1 Indexing, Selection, Subsetting&#xff08;索引&#xff0c;选择&#xff0c;取子集&#xff09;2 Time Series with Duplicate Indices&#xff08;重复索引的时间序列&#xff09; 11.2 Time Seri…...

编程日记 2023/11/19 16:31:24

【C++初阶】STL详解（四）vector的模拟实现

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…...

编程日记 2023/11/19 16:30:23

Zookeeper学习笔记（2）—— Zookeeper API简单操作

前置知识&#xff1a;Zookeeper学习笔记&#xff08;1&#xff09;—— 基础知识-CSDN博客 Zookeeper集群搭建部分 前提&#xff1a;保证zookeeper集群处于启动状态 环境搭建 依赖配置 <dependencies><dependency><groupId>junit</groupId><arti…...

编程日记 2023/11/19 16:29:22

YOLOv8-Seg改进：Backbone改进 |Next-ViT堆栈NCB和NTB 构建先进的CNN-Transformer混合架构

🚀🚀🚀本文改进：Next-ViT堆栈NCB和NTB 构建先进的CNN-Transformer混合架构，包括nextvit_small, nextvit_base, nextvit_large，相比较yolov8-seg各个版本如下： layersparametersgradientsGFLOPsnextvit_small61033841075...

编程日记 2023/11/19 16:28:21

DocCMS keyword SQL注入漏洞复现 [附POC]

文章目录 DocCMS keyword SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 DocCMS keyword SQL注入漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…...

编程日记 2023/11/19 16:27:19

利用（Transfer Learning）迁移学习在IMDB数据上训练一个文本分类模型

1. 背景 有些场景下&#xff0c;开始的时候数据量很小&#xff0c;如果我们用一个几千条数据训练一个全新的深度机器学习的文本分类模型&#xff0c;效果不会很好。这个时候你有两种选择&#xff0c;1.用传统的机器学习训练&#xff0c;2.利用迁移学习在一个预训练的模型上训练…...

编程日记 2023/11/19 16:26:17

pom.xml格式化快捷键

在软件开发和编程领域&#xff0c;"格式化"通常指的是将代码按照一定的规范和风格进行排列&#xff0c;以提高代码的可读性和维护性。格式化代码有助于使代码结构清晰、统一&#xff0c;并符合特定的编码规范。 格式化可以包括以下方面&#xff1a; 缩进&#xff1a…...

编程日记 2023/11/19 16:25:16

【短文】【踩坑】可以在Qt Designer给QTableWidge添加右键菜单吗？

2023年11月18日&#xff0c;周六上午 今天早上在网上找了好久都没找到教怎么在Qt Designer给QTableWidge添加右键菜单的文章 答案是&#xff1a;不可以 在Qt Designer中无法直接为QTableWidget添加右键菜单。 Qt Designer主要用于创建界面布局和设计&#xff0c;无法直接添加…...

编程日记 2023/11/19 16:24:16

Git常用配置

git log 美化输出 全局配置参数 git config --global alias.lm "log --no-merges --color --dateformat:%Y-%m-%d %H:%M:%S --authorghost --prettyformat:%Cred%h%Creset - %Cgreen(%cd)%C(yellow)%d%Cblue %s %C(bold blue)<%an>%Creset --abbrev-commit"…...

编程日记 2023/11/19 16:23:15

力扣每日一题-数位和相等数对的最大和-2023.11.18

力扣每日一题&#xff1a;数位和相等数对的最大和 开篇 这道每日一题还是挺需要思考的&#xff0c;我绕晕了好久&#xff0c;根据题解的提示才写出来。 题目链接:2342.数位和相等数对的最大和 题目描述 代码思路 1.创建一个数组存储每个数位的数的最大值&#xff0c;创建一…...

编程日记 2023/11/19 16:22:14

【win32_001】win32命名规、缩写、窗口

整数类型 bool类型 使用注意&#xff1a; 一般bool 的false0&#xff1b;true1 | 2 | …|n false是为0&#xff0c;true是非零 不建议这样用&#xff1a; if (result TRUE) // Wrong! 因为result不一定只返回1&#xff08;true&#xff09;&#xff0c;当返回2时&#xff0c…...

编程日记 2023/11/19 16:21:12

机器学习第8天：SVM分类

文章目录 机器学习专栏 介绍 特征缩放 示例代码 硬间隔与软间隔分类 主要代码 代码解释 非线性SVM分类 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 介绍 作用&#xff1a;判别种类 原理&#xff1a;找出一个决策边界&#xff0c;判断数据所处区域来识别种类 简单…...

编程日记 2023/11/19 16:20:11

AI工具合集

网站&#xff1a;未来百科 | 为发现全球优质AI工具产品而生 (6aiq.com) 如今&#xff0c;AI技术涉及到了很多领域&#xff0c;比如去水印、一键抠图、图像处理、AI图像生成等等。站长之家之前也分享过一些&#xff0c;但是在网上要搜索找到它们还是费一些功夫。 今天发现了一…...

编程日记 2023/11/19 16:19:10

代码随想录算法训练营Day 54 || 392.判断子序列、115.不同的子序列

392.判断子序列 力扣题目链接(opens new window) 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;&quo…...

编程日记 2023/11/19 16:18:10

C 语言 gets()和puts()

C 语言 gets()和puts() gets()和puts()在头文件stdio.h中声明。这两个函数用于字符串的输入/输出操作。 C gets()函数 gets()函数使用户可以输入一些字符&#xff0c;然后按Enter键。 用户输入的所有字符都存储在字符数组中。 空字符将添加到数组以使其成为字符串。 gets()允…...

编程日记 2023/11/19 16:16:06

核—幂零分解

若向量空间 V \mathcal V V存在子空间 X \mathcal X X与 Y \mathcal Y Y&#xff0c;当 X Y V X ∩ Y 0 \mathcal {X\text{}Y\text{}V}\\ \mathcal {X}\cap \mathcal {Y}0 XYVX∩Y0 时称子空间 X \mathcal X X与 Y \mathcal Y Y是完备的&#xff0c;其中记为 X ⊕ Y V \ma…...

编程日记 2023/11/19 16:15:05

轻松掌控财务，分析账户花销，明细记录支出情况

随着科技的发展&#xff0c;我们的生活变得越来越智能化。然而&#xff0c;对于许多忙碌的现代人来说&#xff0c;管理财务可能是一件令人头疼的事情。复杂的账单、花销、收入&#xff0c;这些可能会让你感到无从下手。但现在&#xff0c;我们有一个全新的解决方案——一款全新…...

编程日记 2023/11/19 16:14:04

竞赛 题目：基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

文章目录 1 简介2 传统机器视觉的手势检测2.1 轮廓检测法2.2 算法结果2.3 整体代码实现2.3.1 算法流程 3 深度学习方法做手势识别3.1 经典的卷积神经网络3.2 YOLO系列3.3 SSD3.4 实现步骤3.4.1 数据集3.4.2 图像预处理3.4.3 构建卷积神经网络结构3.4.4 实验训练过程及结果 3.5 …...

编程日记 2023/11/19 16:13:03

11. Spring源码篇之实例化前的后置处理器

简介 spring在创建Bean的过程中&#xff0c;提供了很多个生命周期&#xff0c;实例化前就是比较早的一个生命周期&#xff0c;顾名思义就是在Bean被实例化之前的处理&#xff0c;这个时候还没实例化&#xff0c;只能拿到该Bean的Class对象&#xff0c;如果在这个时候直接返回一…...

编程日记 2023/11/19 16:12:03

CameraKit-Android终极社区贡献指南：从新手到核心开发者的完整教程

CameraKit-Android终极社区贡献指南&#xff1a;从新手到核心开发者的完整教程 【免费下载链接】camerakit-android Library for Android Camera 1 and 2 APIs. Massively increase stability and reliability of photo and video capture on all Android devices. 项目地址:…...

编程新知 2026/4/2 21:39:08

运维系列【仅供参考】：【Docker】容器生命周期管理：从优雅停止到高效清理的实战技巧

【Docker】容器生命周期管理：从优雅停止到高效清理的实战技巧 【Docker】容器生命周期管理：从优雅停止到高效清理的实战技巧 摘要 1. 为什么需要关注容器生命周期管理？ 2. 停止容器的艺术：从温柔到强硬 2.1 优雅停止的正确姿势 2.2 何时该用强制终止 2.3 暂停与恢复的妙用 …...

编程新知 2026/4/2 19:49:46

Vue3+TS+Vite项目实战：5分钟搞定Mock数据接入（附完整代码）

Vue3TSVite项目实战&#xff1a;5分钟实现动态权限Mock系统 最近在重构后台管理系统时&#xff0c;遇到一个典型痛点&#xff1a;前端页面都开发完了&#xff0c;后端接口还在设计中。这种前后端进度不匹配的情况&#xff0c;相信每个前端开发者都深有体会。今天分享的这套Mock…...

编程新知 2026/4/2 19:43:44

Windows 10/11下Frida逆向分析环境搭建避坑指南（含ADB驱动安装）

Windows 10/11逆向工程实战&#xff1a;Frida环境搭建全流程与疑难解析 逆向工程的世界就像一场数字考古&#xff0c;而Frida无疑是当前最趁手的工具之一。但很多新手在Windows平台搭建Frida环境时&#xff0c;往往会陷入Python版本地狱、ADB驱动失效、设备连接失败等连环陷阱。…...

编程新知 2026/4/2 19:03:05

“AI人工智能+”政务一网通办多智能体协同建设方案：五层两体系总体架构、数据与安全体系、信创适配与实施运维

该方案是一份成熟的技术蓝图&#xff0c;它不仅仅是将AI简单叠加到政务系统&#xff0c;而是通过“多智能体协同”重构了业务组织逻辑。方案详细定义了从语料治理、模型微调、Agent协作、信创适配到安全合规的全链路工程细节&#xff0c;具有极强的实操性与前瞻性&#xff0c;适…...

编程新知 2026/4/2 18:14:20

OpenCascade实战：TopoDS_Shape数据结构的高效遍历与优化策略

1. TopoDS_Shape数据结构基础解析 在OpenCascade中&#xff0c;TopoDS_Shape是构建三维模型的基石。这个看似简单的类实际上包含了三个关键数据成员&#xff1a;myTShape、myLocation和myOrient。理解这三个字段的运作机制&#xff0c;是高效操作模型的前提。 myTShape是一个智…...

编程新知 2026/4/2 16:56:42

忍者像素绘卷效果实测：32色感在移动端微信小程序的色彩还原精度

忍者像素绘卷效果实测&#xff1a;32色感在移动端微信小程序的色彩还原精度 1. 测试背景与目标 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工具&#xff0c;主打16-Bit复古游戏美学风格。本次测试聚焦于其在移动端微信小程序环境下的色彩还原能力&#xff0c;特…...

编程新知 2026/4/2 16:03:30

新手也能懂！用沁恒CH579的TMOS实现第一个蓝牙外设（附完整代码）

从零开始&#xff1a;用沁恒CH579打造你的第一个蓝牙LED控制器 第一次接触嵌入式开发的新手们&#xff0c;常常会被各种专业术语和复杂框架吓退。但今天&#xff0c;我要带你用沁恒CH579开发板和它的TMOS系统&#xff0c;完成一个实实在在的蓝牙控制LED项目——不需要深厚的编…...

编程新知 2026/4/2 15:27:02

终极指南：QLVideo让macOS视频预览支持200+格式，Finder管理效率提升300%

终极指南&#xff1a;QLVideo让macOS视频预览支持200格式&#xff0c;Finder管理效率提升300% 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. …...

编程新知 2026/4/2 14:09:38

Pikachu靶场实战：File Inclusion漏洞从入门到精通（附防御代码）

Pikachu靶场实战&#xff1a;File Inclusion漏洞攻防全解析 在网络安全领域&#xff0c;文件包含漏洞&#xff08;File Inclusion&#xff09;一直是Web应用渗透测试中的高频发现项。这种看似简单的漏洞类型&#xff0c;却能导致服务器敏感信息泄露甚至完全沦陷。Pikachu靶场作…...

编程新知 2026/4/2 14:03:33