在 Angular 中创建多页 PDF

Question

在Angular中生成多个PDF页面的方法

- Raphaël Balet

Answer 1

首先，下载jsPDF和html2canvas
npm i jspdf --save
npm i html2canvas --save

然后将其导入到组件中

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>

注意：导出太多文件会破坏浏览器并给您一个“调试连接已关闭，原因：渲染进程已关闭”的错误提示。

在Angular 7.2.1中进行了测试。

- Raphaël Balet