html2canvas: Not able to get contents of divs with "display:none"

Hello, I’m working with Angular 6 and “html2canvas” to create a PDF with “jsPdf” … I wanted to take a screenshot to a hidden div and I could not do it until I ACHIEVE it

the capture is made to the div with id “html-pdf”

“HTML” `<a (click)=“download2()”> Student Card /a>

div id = “pdf” *ngIf = “test” style = “text-align: center; margin-top: 5px;”> div id = “html-pdf”>

/div /div`

“js or in angular is Typescript” `download2 () { var imgcab: string; imgcab = this.base64logo.trim ();

html2canvas (document.getElementById (‘html-pdf’), {scale:2}). Then (function (canvas) {

var img = canvas.toDataURL (“image / png”, 1);

var doc = new jsPDF ({ orientation: ‘p’, unit: ‘mm’, format: ‘letter’, });

doc.addImage (img, ‘PNG’, 2,2,212,272); doc.addImage (imgcab, ‘JPEG’, 5, 5,30,30); doc.save (‘testCanvas.pdf’); });`

And the most important thing to hide the div inside the screen.

“CSS” #pdf { overflow: hidden; height: 0; }

the code creates a pdf with the capture of the div “html-pdf” that is inside the hidden div “pdf” …

I hope you serve them

I wrote this in Spanish and it is translated, from Chile;

clip-path will work

.clipped {
  clip-path: inset(0 100% 0 0);
}

I ran into this issue very recently, and if you want a particular div to be invisible and screenshotted, set the css properties as

height: 0% overflow:hidden

I used <div id="pdf-snapshot-render" style="height:0;overflow:hidden"></div> for the container, and the following to render it:

const canvas = await html2canvas(element, {
  onclone: (document: Document) => {
    const div = document.getElementById('pdf-snapshot-render');
    div.style.overflow = 'visible';
  },
});

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

I found some info on Internet. We can set css to specified div with “display:none” then add option onclone like above. Plz add option “loggin: true” to see what happen

clip-path will work

.clipped {
  clip-path: inset(0 100% 0 0);
}

This worked for me ! Thanks @alphardex !

Html2canvas interprets the display:none style correctly and thus will not render a hidden element. To accomplish what you want, you can absolutely position a visible element off of the page viewport (if the desire is to “render a hidden element”).

clip-path will work

.clipped {
  clip-path: inset(0 100% 0 0);
}

Wow, good job, it works for me !!! thx

you are a hero , much love and respect

I think the right way to do the job is to use onclone property, https://stackoverflow.com/a/51049443/2251303

I ended up generating the canvas immediately after the target div, and then hiding the div immediately after the canvas was loaded. The flicker is barely noticeable.

My code looks like this:

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});