HTML2Canvas does not render full div, only what is visible on screen?

Question

I\'m trying to use HTML2Canvas to render the contents of a div. Here is the code:

var htmlSource = $(\'#potenzial-page\')[0];

$(\'#btn\').on(\"click\", fun         


        

Answer 1

Another React Approach...

On your submit button on click set the document height dynamically, then call html2canvas using document.body as the first argument

 {
var body = document.body,
html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight,
             html.clientHeight, html.scrollHeight, html.offsetHeight);
             document.body.style.height = `${height}px`

html2canvas(document.body).then(function (canvas) {
                var imgData = canvas.toDataURL('image/pdf')
                var doc = new jsPDF('p', 'mm', [canvas.width, canvas.height])
                doc.addImage(imgData, 'PDF', 10, 10, canvas.width, canvas.height)
                doc.save('name-of-pdf.pdf')
              });
}}>Submit

This will set the html height of public/index.html which html2canvas seems to render from (i.e. not the "root" div).