JSPDF / HTML2CANVAS rendering blank pages with .html method

Question

The resulting PDF pages are rendered blank. I have tried many methods and different versions of the dependencies. Now I feel that all hope is lost.

I need the text to be selectable and have an existing styled template with text and images so I need to use the .html() method. Letting JSPDF decide the pagebreaks is not working properly and leads to height spacing issues across browsers and devices.

Please help me Stackoverflow, you are my only hope.

JSPDF Version 2.5.1 HTML2CANVAS Version 1.4.1

JS:

      function generatePDF() {

        var doc = new jsPDF({
          unit: 'mm',
          format: [210, 200],
          orientation: 'portrait'
        });

        var options = {
          html2canvas: {
            scale: 0.2
          },
          x: 0,
          y: 0,
          width: 210,
          windowWidth: 1000
        }

        // Loop through each div and add it to the PDF as a new page
        $('div[id^="page-"]').each(function() {
          var content = $(this)[0];
         
          // Add the content to the PDF as a new page
          doc.addPage();
          doc.html(content, options);
        });

        // Save the PDF
        doc.save('my-pdf');

      }

HTML example (some code omitted for simplicity):

<div id="page-1">Content for page 1</div>
<div id="page-2">Content for page 2</div>
<div id="page-3">Content for page 3</div>
<div id="page-4">Content for page 4</div>

Answer 1

Thanks to @Abdullah and this question: jsPDF html method with addPage to split pages in generated PDF ...

...I managed to get this working:

function generatePDF() {

    var doc = new jsPDF({
      unit: 'mm',
      format: [210, 297],
      orientation: 'portrait'
    });

    // Add first page
    doc.html($("#page-1")[0], {
      callback: function () {
        // Add second page
        doc.addPage();
        doc.html($("#page-2")[0], {
          callback: function () {
            // Add third page
            doc.addPage();
            doc.html($("#page-3")[0], {
              callback: function () {
                // Add fourth page
                doc.addPage();
                doc.html($("#page-4")[0], {
                  // Save the PDF
                  callback: function () {
                    doc.save('my-pdf');
                  },
                  html2canvas: { scale: 0.2 },
                  x: 0,
                  y: 891,
                  width: 210,
                  windowWidth: 1050
                });
              },
              html2canvas: { scale: 0.2 },
              x: 0,
              y: 594,
              width: 210,
              windowWidth: 1050
            });
          },
          html2canvas: { scale: 0.2 },
          x: 0,
          y: 297,
          width: 210,
          windowWidth: 1050
        });
      },
      html2canvas: { scale: 0.2 },
      x: 0,
      y: 0,
      width: 210,
      windowWidth: 1050
    });

  }