在Angular中生成多个PDF页面的方法
首先,下载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>