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

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

或者把tr的背景色设置为透明在td里设置背景色对于使用了第三方表单的Table组件-如果用的组件tabletr的背景色也是组件设置的。

所以tr样式用这个覆盖background-color:

transparent;再设置单元格的background-color

实现代码

html2canvas(document.getElementById(capture),{scale:2})const

link

document?.createElement(a)link.download

标签${data?.wastesName

}${data?.wastesName??}.pnglink.href

canvas.toDataURL(image/png)link?.click()}/***

打印及关闭窗口*

printWindow?.print();printWindow?.close()}/***

打印*/const

html2canvas(document.getElementById(capture),{scale:2})const

printWindow

_blank);printWindow?.document?.open();printWindow?.document?.write(html

langzhheadtitle打印/title/headbody);printWindow?.document?.write(img

src

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博客

参考文献