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 ?

take a look at docker there is one for this

axel axel
– axel axel

2019-05-23 14:03:04 +00:00
Commented May 23, 2019 at 14:03 — axel axel
– axel axel, Commented May 23, 2019 at 14:03
can you please provide your full html code also?

Pallamolla Sai
– Pallamolla Sai

2019-05-23 14:43:39 +00:00
Commented May 23, 2019 at 14:43 — Pallamolla Sai
– Pallamolla Sai, Commented May 23, 2019 at 14:43
@PALLAMOLLA SAI added to the post

Ilya Tomashenko
– Ilya Tomashenko

2019-05-23 14:47:50 +00:00
Commented May 23, 2019 at 14:47 — Ilya Tomashenko
– Ilya Tomashenko, Commented May 23, 2019 at 14:47
Can you add the rendered html?

karthick
– karthick

2019-05-23 14:49:45 +00:00
Commented May 23, 2019 at 14:49 — karthick
– karthick, Commented May 23, 2019 at 14:49
Could you please tell me did my answer helped?

Pallamolla Sai
– Pallamolla Sai

2019-05-24 10:16:59 +00:00
Commented May 24, 2019 at 10:16 — Pallamolla Sai
– Pallamolla Sai, Commented May 24, 2019 at 10:16

Rubén S. García · Accepted Answer · 2019-05-23 15:13:25Z

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

Collectives™ on Stack Overflow

export html to pdf with multiple pages

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related