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

[Spartan-Arun]

Hi I want to take screen shot of a div which is hidden

this is the code I tried
HTML:

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS:

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

Error in Browser:
**

Uncaught TypeError: Cannot read property 'length' of nullhtml2canvas @ html2canvas.js:941(anonymous function) @ HtmlPage.html:13

**
My fiddle:https://jsfiddle.net/h39tp0Ly/2/

Please help me out with this

[herringtown]

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").

[atefBB]

May be useful.
Thanks !

[Spartan-Arun]

It works if and only if the div has css which is not "display:none". so i used .show() and .hide() combination to make the element visible and hidden to form Canvas

[karsondang]

       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

[nettiopsu]

Actually the trick of putting container out of a viewport with position absolute and top/left negative values - does not work in Firefox, it throws NS_ERROR_FAILURE exception

It works though in Chrome

[kchen1025]

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

[chidiwilliams]

This doesn't work for me @kchen1025

[chidiwilliams]

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()
});

[kuraudeo]

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;

[gamesover]

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

[alphardex]

clip-path will work

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

[dprentis]

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';
  },
});

[markusv]

I had the same problem. This is the best solution I found: eKoopmans/html2pdf.js#333

[jsmithdev]

needed to hide the document(s) from UI (display: none) without show-hiding / no flicker etc.
i'm also using web components and slot attributes to render different html templates dynamically for different needs, allowing people to edit html templates and not logic, etc etc -- took awhile to get it all down and haven't seen an example so figured i'd share:

getSlottedReport(slot) {

	const result = document.createElement('div');// container

	// this will be different depending on how far down you need to get assignedElements from (2 web components down here)
	const els = slot
		.assignedElements()[0]
		.shadowRoot.querySelectorAll('slot')[1]
		.assignedElements();

	// clone, allow to show and append
	const addHtml = (el, div) => {
		const r = el.cloneNode(true)
		r.style.display = 'block'; // original is 'none' to hide
		div.appendChild(r)
	}

	// inside any html template, the part(s) i want added to the PDF is enclosed in a div with a class named printable (which are display none / invisible to the UI)
	els.map((el) => {

		const ls = el.shadowRoot?.querySelectorAll('.printable')
		
		// there is either a NodeList (ls) else a single Node (el)
		if (ls) {
			Array.from(ls).map(_el => addHtml(_el, result));
		} else {
			addHtml(el, result)
		}

		return undefined;
	});

	return result; // container with any wanted html appended
}

example of using function above to generate blob:

/**
* output the pdf as a blob
* @returns {Promise}
*/
@api
blob() {
  const slot = this.template.querySelector('slot'); // main slot

  const html = this.getSlottedReport(slot);

  const options = this.options; // html2pdf options object

  return html2pdf().from(html).set(options).outputPdf('blob');
}

[amirihusayn]

clip-path will work

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

This worked for me ! Thanks @alphardex !

[OneScreenSol]

Set display: none in styles and then add this code, it worked for me.

html2canvas(document.getElementById("pdfTable"), {

onclone: function (clonedDoc) {

 // I made the div hidden and here I am changing it to visible
clonedDoc.getElementById('pdfTable').style.visibility = 'visible';

}
}).then(canvas => {
// The following code is to create a pdf file for the taken screenshot
var pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("PNG", 1.0);
pdf.addImage(imgData, 0, 0, (canvas.width), (canvas.height));
pdf.save('converteddoc.pdf');
});

[Pain-and-Love]

clip-path will work

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

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

[ChamkhiAnas]

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