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

You can add in scroll position as a variable in html2canvas which removes the need to scroll the page.

html2canvas(document.querySelector("#your-element"), { scrollX: 0, scrollY: 0 }).then(function(canvas) {

Answer 2

A solution that worked for me was to add the following to my css:

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

It prevents html2canvas from limiting the rendering to the viewable area (which seems to be the default).

See here: https://github.com/niklasvh/html2canvas/issues/117

Answer 3

Another React Approach...

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

<button onClick={() => {
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</button>

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

Answer 4

This works for me:

  const input = document.getElementById('fragmentForPDF');
  
  // This row fixed problem
  input.parentNode.style.overflow = 'visible';

  html2canvas(input)...