使用html2canvas转换table为图片时合并单元格rowspan失效，无边框显示问题解决（React实现）
最近使用 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表单为图片，但是转换出的图片被合并的单元格没有显示边框 查了原因是因为我为tr设置了背景色，然后td设置了rowspan，设置了rowspan的单元格就会出现边框不显示的问题。 解决方法就是取消tr的背景色，然…...
pandas教程：Time Series Basics 时间序列基础
文章目录 11.2 Time Series Basics（时间序列基础）1 Indexing, Selection, Subsetting（索引，选择，取子集）2 Time Series with Duplicate Indices（重复索引的时间序列） 11.2 Time Seri…...
【C++初阶】STL详解（四）vector的模拟实现
本专栏内容为：C学习专栏，分为初阶和进阶两部分。 通过本专栏的深入学习，你可以了解并掌握C。 💓博主csdn个人主页：小小unicorn ⏩专栏分类：C 🚚代码仓库：小小unicorn的代码仓库&…...
Zookeeper学习笔记（2）—— Zookeeper API简单操作
前置知识：Zookeeper学习笔记（1）—— 基础知识-CSDN博客 Zookeeper集群搭建部分 前提：保证zookeeper集群处于启动状态 环境搭建 依赖配置 <dependencies><dependency><groupId>junit</groupId><arti…...
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...
DocCMS keyword SQL注入漏洞复现 [附POC]
文章目录 DocCMS keyword SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 DocCMS keyword SQL注入漏洞复现 [附POC] 0x01 前言 免责声明：请勿利用文章内的相关技术从事非法测…...
利用（Transfer Learning）迁移学习在IMDB数据上训练一个文本分类模型
1. 背景 有些场景下，开始的时候数据量很小，如果我们用一个几千条数据训练一个全新的深度机器学习的文本分类模型，效果不会很好。这个时候你有两种选择，1.用传统的机器学习训练，2.利用迁移学习在一个预训练的模型上训练…...
pom.xml格式化快捷键
在软件开发和编程领域，"格式化"通常指的是将代码按照一定的规范和风格进行排列，以提高代码的可读性和维护性。格式化代码有助于使代码结构清晰、统一，并符合特定的编码规范。 格式化可以包括以下方面： 缩进：…...
【短文】【踩坑】可以在Qt Designer给QTableWidge添加右键菜单吗？
2023年11月18日，周六上午 今天早上在网上找了好久都没找到教怎么在Qt Designer给QTableWidge添加右键菜单的文章 答案是：不可以 在Qt Designer中无法直接为QTableWidget添加右键菜单。 Qt Designer主要用于创建界面布局和设计，无法直接添加…...
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.18
力扣每日一题：数位和相等数对的最大和 开篇 这道每日一题还是挺需要思考的，我绕晕了好久，根据题解的提示才写出来。 题目链接:2342.数位和相等数对的最大和 题目描述 代码思路 1.创建一个数组存储每个数位的数的最大值，创建一…...
【win32_001】win32命名规、缩写、窗口
整数类型 bool类型 使用注意： 一般bool 的false0；true1 | 2 | …|n false是为0，true是非零 不建议这样用： if (result TRUE) // Wrong! 因为result不一定只返回1（true），当返回2时，…...
机器学习第8天：SVM分类
文章目录 机器学习专栏 介绍 特征缩放 示例代码 硬间隔与软间隔分类 主要代码 代码解释 非线性SVM分类 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 介绍 作用：判别种类 原理：找出一个决策边界，判断数据所处区域来识别种类 简单…...
AI工具合集
网站：未来百科 | 为发现全球优质AI工具产品而生 (6aiq.com) 如今，AI技术涉及到了很多领域，比如去水印、一键抠图、图像处理、AI图像生成等等。站长之家之前也分享过一些，但是在网上要搜索找到它们还是费一些功夫。 今天发现了一…...
代码随想录算法训练营Day 54 || 392.判断子序列、115.不同的子序列
392.判断子序列 力扣题目链接(opens new window) 给定字符串 s 和 t ，判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些（也可以不删除）字符而不改变剩余字符相对位置形成的新字符串。（例如，&quo…...
和puts())
C 语言 gets()和puts()
C 语言 gets()和puts() gets()和puts()在头文件stdio.h中声明。这两个函数用于字符串的输入/输出操作。 C gets()函数 gets()函数使用户可以输入一些字符，然后按Enter键。 用户输入的所有字符都存储在字符数组中。 空字符将添加到数组以使其成为字符串。 gets()允…...
核—幂零分解
若向量空间 V \mathcal V V存在子空间 X \mathcal X X与 Y \mathcal Y Y，当 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是完备的，其中记为 X ⊕ Y V \ma…...
轻松掌控财务，分析账户花销，明细记录支出情况
随着科技的发展，我们的生活变得越来越智能化。然而，对于许多忙碌的现代人来说，管理财务可能是一件令人头疼的事情。复杂的账单、花销、收入，这些可能会让你感到无从下手。但现在，我们有一个全新的解决方案——一款全新…...
竞赛 题目：基于机器视觉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 …...
11. Spring源码篇之实例化前的后置处理器
简介 spring在创建Bean的过程中，提供了很多个生命周期，实例化前就是比较早的一个生命周期，顾名思义就是在Bean被实例化之前的处理，这个时候还没实例化，只能拿到该Bean的Class对象，如果在这个时候直接返回一…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库，用于数据验证和设置管理，通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发（如 FastAPI）、配置管理和数据解析，核心功能包括： 数据验证：通过…...
Android Framework预装traceroute执行文件到system/bin下
文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数（使用 ICMP Echo 请求）-T 参数（使用 TCP SYN 包） 相关文章 Android SDK中寻找traceroute代码 设备使用的是Android 11，在/s…...