1

Would like to take a screenshot of a div inside the document body (to be saved as PDF) but I would like to clone it first, hide it from being on the page and manipulate it stylewise before being rendered by html2canvas. Problem is the div is showing on the page with the CSS manipulation (but it should never show at all). What's the correct way to do it?

Have to add the element to body first otherwise I would get this error Uncaught (in promise) Unable to find element in cloned iframe

The other problem is if I do hide the opacity or set visibility none of the cloned div, then the saved PDF will have nothing inside


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
})
user3226932
  • 2,042
  • 6
  • 39
  • 76

2 Answers2

2

Perhaps instead of appending the copied node to the end, you prepend it to the beginning of the document using document.body.prepend(myNodeCopy as Node); and set its positioning as absolute in the styling. Then the rest of the page should be able to overlap it (cover it up) while you perform the rest of your operations. You may also need to consider the stacking context to ensure the elements are stacked in the proper order.

Ibrennan208
  • 1,345
  • 3
  • 14
  • 31
1

Well I could add the HTML Element to the body, and just remove it after the canvas is create and/or in the afterPrint event.

I made a small demo, that show's this. (it uses the library html2canvas and 'printThis')

The basic idea is:

  • add the clone Node
  • alter the style of the clone Node
  • create the canvas
  • remove cloned Node
  • open the print page, or download image, or ...
  • remove canvas
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) 
        });
    })
});

Here a working demo, on jsFiddle:

https://jsfiddle.net/va7d905y/1/

I hope this answers your question(s)

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • @KJ thank you for your feedback, but i assume it is slow / falied, because you are running it localy on a Webserver on **http**, not **https**. when you dont use the protocoll in a url, it defaults to the protocol of the refering page, as explained in this answer https://stackoverflow.com/a/8951636/1679286 . – winner_joiner Jun 28 '22 at 03:12