generating a PDF with multiple HTML div elements on separate pages using JS?

[rajashripise]

I am facing the issue to generate the a pdf with multiple HTML div elements on separate pages
only text getting printed but not the content from second div getting blank
i want to allow the autopaging text for pages

const doc = new jsPDF('p', 'mm', 'a4');
   const element = document.getElementById('div1');
   const element2 = document.getElementById('div2');
doc.html(element, {
           callback: function (doc) {
            
             resolve();
           },
           margin: [8,8,8,8],
           html2canvas: {
             useCORS: true,
             allowTaint: true,
             letterRendering: true,
             logging: false,
             scale: 0.6,
           },
           x: 3,
           y: 3
         });
       });
doc.addpage();
doc.text("Description = " ,15,20);
doc.html(element2, {
           callback: function (doc) {
            
             resolve();
           },
           margin: [8,8,8,8],
           html2canvas: {
             useCORS: true,
             allowTaint: true,
             letterRendering: true,
             logging: false,
             scale: 0.6,
           },
           x: 3,
           y: 3
         });
       });  doc.output('dataurlnewwindow');   

[Amar-Gill]

In my experience, setting autoPaging: false inside HTMLOptions would allow you to use doc.addPage() and set the element content to the next page.

One caveat is that overflowing content on the page will just be cut off instead of starting a new page. That's what autoPaging: 'text' option is for.

[MedcaphRepo]

Same issue i am facing

[Amar-Gill]

ok found a solution that works for me, and allows me to use autoPaging: text.

it involves setting the y position for each element that needs to be on a new page.

can determine the correct y value by using doc.internal.pageSize.height in your loop.

  const doc = new jsPdf();

  for (let i = 0; i < numPages; i++) {
    const y = (doc.getNumberOfPages() - 1) * doc.internal.pageSize.height;

    const page = document.createElement('div') // append stuff into the div

    await doc.html(page, { ...htmlOptions, y });
    doc.addPage();
  }