Create multiple page PDF in angular

Question

How to generate multiple PDF pages in angular

Answer 1

first, download jsPDF and html2canvas
npm i jspdf --save
npm i html2canvas --save

And then import into the component

pdf.component.ts

import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';

/** ... **/

export class PdfComponent {
  items = [{ title: 'first' }, { title: 'second' }] // Content of the pages
  counter: number
  length: number
  pdf: jsPDF

  downloadPDF() {
    this.pdf = new jsPDF('p', 'mm', 'a4') // A4 size page of PDF
    this.length = this.items.length
    this.counter = 0

    this.generatePDF()
  }

  generatePDF() {
    var data = document.getElementById('pdf' + this.counter)

    html2canvas(data, {
      scale: 3 // make better quality ouput
    }).then((canvas) => {
      this.counter++

      // Few necessary setting options
      var imgWidth = 208
      var imgHeight = (canvas.height * imgWidth) / canvas.width

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

      // Control if new page needed, else generate the pdf
      if (this.counter < this.length) {
        this.pdf.addPage()
        this.getLetter()
      } else {
        this.pdf.save('users.pdf') // Generated PDF
        return true
      }
    })
  }
}

<!-- pdf.component.html -->
<div [id]="'pdf'+i" *ngFor="let item of items; index as i">
  <h1>{{ item.title }}</h1>
  <!-- the content of one page here -->
</div>

<button (click)="downloadPDF()">
  generatePDF
</button>

Note: Exporting to much files broke the browser and give you an
"Debuggin connection was closed, Reason: Render process gone."

Tested in Angular 7.2.1