export html to pdf with multiple pages

Question

I need to export few parts of the page to few different pages in pdf. When I use method save() outside html2canvas() func it returns empty pages, If I add it one of canvas functions it will return the content of this canvas.

const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
let data = document.querySelector('.first-page');
html2canvas(data).then(canvas => {
  const imgWidth = 208;
  const imgHeight = canvas.height * imgWidth / canvas.width;

  const contentDataURL = canvas.toDataURL('image/png');
  const position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
});

pdf.addPage();

data = document.querySelector('.second-page');
html2canvas(data).then(canvas => {
  const imgWidth = 208;
  const imgHeight = canvas.height * imgWidth / canvas.width;

  const contentDataURL = canvas.toDataURL('image/png');
  const position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
});

pdf.save('dashboard.pdf'); // Generated PDF

html

<div class="adscale-table">
  <div class="first-page">
    <dashboard-platforms id="platforms-section"></dashboard-platforms>
  </div>
  <div class="d-flex flex-column second-page">
    <div class="d-flex mb-4">
      <dashboard-performance-by-device id="performance-by-device-section" class="col-xl-6"></dashboard-performance-by-device>
      <dashboard-performance-by-location id="performance-by-location-section" class="col-xl-6"></dashboard-performance-by-location>
    </div>
    <div class="d-flex">
      <dashboard-bar-widget *ngIf="gendersData; else loader" class="col-xl-6" id="performance-gender-section"
                            title="Performance by Gender" [height]="300" [currency]="customerCurrency"
                            [metricSettings]="metricsSettings" [allData]="gendersData">
      </dashboard-bar-widget>
      <dashboard-bar-widget *ngIf="agesData; else loader" class="col-xl-6" id="performance-age-section"
                            title="Performance by Age" [height]="300" [currency]="customerCurrency"
                            [metricSettings]="metricsSettings" [allData]="agesData">
      </dashboard-bar-widget>
    </div>
  </div>
</div>

if I put save() inside "html2canvas(data).then(canvas => {...})" function, I will get two pdf files with images of specified part of the page. How can I get these two parts in one pdf ?

Answer 1

I think this could be the solution and also a cleaner code:

async function printDocument() {
  const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
  const imgWidth = 208;
  const position = 0;

  let page1 = document.querySelector('.first-page');
  let page1 = document.querySelector('.second-page');
  const [imgPage1, imgPage2] = await Promise.all([html2canvas(page1), html2canvas(page2)]);
  // Process first image
  let imgHeight = imgPage1.height * imgWidth / imgPage1.width;
  let contentDataURL = imgPage1.toDataURL('image/png');
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
  pdf.addPage();
  // Process second image
  imgHeight = imgPage2.height * imgWidth / imgPage2.width;
  contentDataURL = imgPage2.toDataURL('image/png');
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);

  pdf.save('dashboard.pdf'); // Generated PDF
}

EDIT: I also noticed that you're using mm units for the PDF document if that works for you it's ok but I had a recent experience adding images to a PDF document and 'px' units served for my purpose slightly better. Anyway if that works it's ok.

EDIT 2: There is another answer explaining better what's the problem and why when you put pdf.save('dashboard.pdf') method inside html2canvas it works. Here is the link Getting image on page 1 of 2 page pdf