修改样式后用html2canvas截图隐藏元素
修改样式后用html2canvas截图隐藏元素
提问于 2022-06-24 18:25:20
想要在文档正文中获取一个div的屏幕截图(保存为PDF)，但我想先克隆它，将它隐藏在页面上，并在被html2canvas呈现之前按风格对它进行操作。问题是div正在用CSS操作显示在页面上(但它根本不应该显示)。正确的方法是什么？
必须先将元素添加到主体，否则我将得到这个错误Uncaught (in promise) Unable to find element in cloned iframe
另一个问题是，如果我确实隐藏了不透明度，或者没有将克隆的div设置为可见性，那么保存的PDF将没有任何内容。
const myNodeCopy = document.body
.querySelector("#myDiv")
?.cloneNode(true);
document.body.append(myNodeCopy as Node);
(myNodeCopy as HTMLElement).setAttribute(
"style",
"background-color: white; color: black;"
);
// problem if setting styles to opacity 0 or visilibity none because exported pdf will be empty
//
html2canvas(mydiv, {
onclone: function (clonedDoc) {
}
}).then((canvas)=>{
// add image to JsPDF
// remove the cloned div from document body
})Stack Overflow用户
发布于 2022-06-27 18:55:33
我可以将HTML元素添加到body中，并在canvas创建和/或在afterPrint事件中删除它。
我做了个小演示，这个节目就是这样。(它使用库html2canvas和'printThis')
的基本思想是：
- 添加克隆节点
- 更改克隆节点的样式
- 创建画布
- 删除克隆节点
- 打开打印页面，下载图片，或者.
- 移除帆布
document.querySelector('#print').addEventListener('click', _ => {
// clone the node
const myNodeCopy = document
.querySelector("#page")
.cloneNode(true);
myNodeCopy.id = "clonedPage";
// add the cloned node to the page
document.body.appendChild(myNodeCopy);
// add extra styles
myNodeCopy.setAttribute( "style", "border: black solid 5px;");
// just select the new cloneNode
html2canvas(document.querySelector('#clonedPage'), { allowTaint: true })
.then(canvas => {
// add canvas to the body
document.body.appendChild(canvas);
// remove cloned html-element from the page
document.body.removeChild(myNodeCopy);
$(canvas).printThis({
canvas: true,
// remove the canvas from the page
afterPrint: _ => document.body.removeChild(canvas)
});
})
});这里是一个工作演示，在jsFiddle:上
https://jsfiddle.net/va7d905y/1/
我希望这能回答你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72748032
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号