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

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

news 2025/11/5 10:39:58

最近使用 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为图片时合并单元格rowspan失效，无边框显示问题解决（React实现）

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

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

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

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

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

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

pom.xml格式化快捷键

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

Git常用配置

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

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

机器学习第8天：SVM分类

AI工具合集

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

C 语言 gets()和puts()

核—幂零分解

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

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

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

龙虎榜——20250610

【网络】每天掌握一个Linux命令 - iftop

大话软工笔记—需求分析概述

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

排序算法总结（C++）

免费PDF转图片工具

LabVIEW双光子成像系统技术