修改样式后使用 html2canvas 截取隐藏元素

Question

想在文档正文中截取 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
})

Answer 1

也许不是将复制的节点附加到末尾，而是使用 document.body.prepend( myNodeCopy document.body.prepend(myNodeCopy as Node); 并将其定位在样式中设置为绝对。 然后，在您执行其余操作时，页面的其余部分应该能够重叠（覆盖）。 您可能还需要考虑堆叠上下文以确保元素以正确的顺序堆叠。

Answer 2

好吧，我可以将 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/

我希望这能回答你的问题）