使用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 PNG
    const 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博客 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/156374.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音店铺所有商品数据接口(douyin.item_search_shop)

抖音店铺所有商品数据接口可以用于获取抖音店铺的所有商品数据&#xff0c;包括商品的标题、价格、库存、销量、评价等信息。通过该接口&#xff0c;开发者可以在自己的应用程序或网站中展示抖音店铺的商品信息&#xff0c;提升用户体验和购物决策效率。 此外&#xff0c;抖音…

苹果电脑杀毒软件cleanmymac2024

苹果电脑怎么杀毒&#xff1f;这个问题自从苹果电脑变得越来越普及&#xff0c;苹果电脑的安全性问题也逐渐成为我们关注的焦点。虽然苹果电脑的安全性相对较高&#xff0c;但仍然存在着一些潜在的威胁&#xff0c;比如流氓软件窥探隐私和恶意软件等。那么&#xff0c;苹果电脑…

这么好看的马面裙 ,女儿穿上不要太美了

红色小翻领&#xff0c;上身米白色金貂绒面料精细顺滑非常有质感 另外还有全手工定制的盘口裙子用的是仿宋代宋锦的织金面料 制作工艺非常复杂很重工的一件衣服 出门保证会被夸&#xff01;&#xff01;

叙永微公益:开展“活水计划-益童成长守护”周末陪伴活动

&#xff08;韩熙 林梅图/文&#xff09;2023年11月12日&#xff0c;叙永县微公益协会的志愿者们早早地驱车前往县内的孤困儿童家庭&#xff0c;与他们共同度过一个充实而温馨的周末。志愿者们不仅为孩子们带来了生活物资、零食、玩具等礼物&#xff0c;更重要的是&#xff0c;…

用Python制作截图小工具

Python编程语言允许我们执行各种任务&#xff0c;所有这些都是在简单模块和短小精悍的代码的帮助下完成的。在Python的帮助下进行屏幕截图就是这样一项任务。 Python为我们提供了许多模块&#xff0c;使我们能够执行不同的任务。有多种方法可以使用Python及其库进行屏幕截图。…

【linux】查看CPU的使用率

命令1&#xff1a;top top 总体系统信息 uptime&#xff1a;系统的运行时间和平均负载。tasks&#xff1a;当前运行的进程和线程数目。CPU&#xff1a;总体 CPU 使用率和各个核心的使用情况。内存&#xff08;Memory&#xff09;&#xff1a;总体内存使用情况、可用内存和缓存…

期望、方差

一、期望和方差的定义 随机变量(Random Variable) X 是一个映射&#xff0c;把随机试验的结果与实数建立起了一一对应的关系。而期望与方差是随机变量的两个重要的数字特征。 1. 期望(Expectation, or expected value) 期望是度量一个随机变量取值的集中位置或平均水平的最基…

Android开发:(AndroidStudio模拟器)如何将模拟器语言设置为中文 模拟器输入法更改为中文输入 键盘输入中文

文章目录 Android开发模拟器设置将模拟器语言设置为中文输入法中文的设置 Android开发模拟器设置 将模拟器语言设置为中文 第一步&#xff1a;打开模拟器后&#xff0c;上滑打开下面的设置图标。 第二步&#xff1a;找到 System (系统) &#xff0c;点击进入。 第三步&am…

6.docker运行mysql容器-理解容器数据卷

运行mysql容器-理解容器数据卷 1.什么是容器数据卷2.如何使用容器数据卷2.1 数据卷挂载命令2.2 容器数据卷的继承2.3 数据卷的读写权限2.4 容器数据卷的小实验&#xff08;加深理解&#xff09;2.4.1 启动挂载数据卷的centos容器2.4.2 启动后&#xff0c;在宿主机的data目录下会…

【仿真动画】ABB IRB 8700 机器人搬运(ruckig在线轨迹生成)动画欣赏

场景 动画 一、IRB 8700简介 二、动画脚本重点分析 2.1 sim.moveToPose 通过在两个 poses 之间执行插值&#xff0c;使用 Ruckig 在线轨迹生成器生成对象运动数据。该函数可以通过处理 4 个运动变量&#xff08;x、y、z 和两个姿势之间的角度&#xff09;或单个运动变量&#…

Transformer原理详解

前言&#xff1a;好久没有用了&#xff0c;我已经快忘记了自己还有一个CSDN账号了。 在某位不知名好友的提醒下&#xff0c;终于拾起来了&#xff0c;自己也从大二转变成了研二。 目前研究方向主要为&#xff1a;时间序列预测&#xff0c;自然语言处理&#xff0c;智慧医疗 欢迎…

git 指定时间代码统计

指定时间代码统计 用法 13 - 17 号 代码情况 近一周 git log --since2023-11-13 00:00:00 --until2023-11-17 23:00:00 --prettytformat: --numstat | awk { add $1; subs $2; loc $1 - $2 } END { printf "added lines: %s, removed lines: %s,total lines: %s\n&…

map和set的简易封装(纯代码)

RBTree.h #pragma once#include<iostream> #include<vector> using namespace std;enum colar { red,black };template<class T>//有效参数就一个 struct RBTreeNode {RBTreeNode(const T& data):_left(nullptr), _right(nullptr), _parent(nullptr)…

Vue bus事件总线的原理与使用

这里写自定义目录标题 一、 Vue Bus 总线原理二、Vue bus的使用1、创建总线&#xff1a; 在 Vue 应用中&#xff0c;可以创建一个 Vue 实例作为总线&#xff0c;用于管理事件。2、事件的发布与订阅&#xff1a; 组件通过订阅事件来监听总线上的消息&#xff0c;而其他组件则通过…

(免费)双相情感障碍筛查MDQ 在线测试双向情感障碍

MDQ用于筛查双相障碍&#xff0c;主要包含13个关于双相障碍症状的是非问题&#xff0c;当前测试采用的量表为2010年杨海晨博士翻译版。该量表为目前世界范围内最常用的双相障碍筛查量表&#xff0c;目前在精神科门诊最为常用的量表之一。 双向情感障碍筛查量表&#xff0c;也叫…

Linux(多用户下)查看cuda、cudnn版本、查看已经安装的cuda版本相关命令

查看已经安装的CUDA多个版本 linux 中cuda默认安装在/usr/local目录中&#xff1a; -可以使用命令&#xff1a; ls -l /usr/local | grep cuda查看该目录下有哪些cuda版本&#xff1a; 如果输出&#xff1a; lrwxrwxrwx 1 root root 21 Dec 17 2021 cuda -> /usr/loc…

监控直流防雷浪涌保护器综合方案

监控系统是一种广泛应用于安防、交通、工业、军事等领域的信息系统&#xff0c;它通过摄像机、传输线路、监控中心等设备&#xff0c;实现对目标区域的实时监视和控制。然而&#xff0c;监控系统也面临着雷电的威胁&#xff0c;雷电可能通过直击雷、感应雷、雷电波侵入等途径&a…

React实战演练项⽬一需求分析及vite_react搭建项目

React实战演练项⽬一需求分析及项目初始化 需求分析 刚学完React,开始找项目进行上手练习&#xff01; 页面组件拆分&#xff1a; 头部&#xff1a;导航tab、搜索框、登录注册 中间&#xff1a;分类导航、轮播图、新人福利、高单价产品导航 课程分类列表、底部内容、登陆提…

当攻防演练已成常态,企业应该相信西医还是老中医?

在面对疾病时&#xff0c;很多人常常会犹豫不决&#xff0c;不知道应该选择中医还是西医进行治疗。与疾病斗争的过程也是一场“战斗”&#xff0c;需要选择合适的“武器”和策略。有些人认为西医疗效快&#xff0c;能够迅速缓解症状&#xff1b;而另一些人则认为中医治疗更根本…

m1 rvm install 3.0.0 Error running ‘__rvm_make -j8‘

在使用M1 在安装cocopods 前时&#xff0c;安装 rvm install 3.0.0遇到 rvm install 3.0.0 Error running __rvm_make -j8 备注: 该图片是借用其他博客图片&#xff0c;因为我的环境解决完没有保留之前错误信息。 解决方法如下&#xff1a; 1. brew uninstall --ignore-depe…