html2canvas 使用 angular2typescript 渲染带有 css 样式的 PDF 文档

typescript

根据html2canvas使用Angular2/typescript渲染带有CSS样式的PDF文档，可以轻松地生成精美的PDF文件。html2canvas是一个流行的JavaScript库，允许我们将HTML元素转换为Canvas，并将其导出为PDF文件。结合Angular2和typescript的强大功能，我们可以实现这一目标。

npm install html2canvas --save

typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
import html2canvas from 'html2canvas';
import * as JSpdf from 'JSpdf';
@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.CSS']
})
export class PdfGeneratorComponent {
  @ViewChild('content') content: ElementRef;
  generatePDF() {
    html2canvas(this.content.nativeElement).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new JSpdf('p', 'mm', 'a4');
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('document.pdf');
    });
  }
}

html
<div #content>
  <h1>Hello, World!</h1>
  
This is an example PDF document generated using html2canvas and Angular2.
  <div style="background-color: #f0f0f0; padding: 10px;">
    <h2>Section 1</h2>
    
<img src="https://img.izhida.com/topic/2c56c360580420d293172f42d85dfbed.jpg" alt="CSS"><br>CSS
This is the first section of the document.
  </div>
  <div style="background-color: #f0f0f0; padding: 10px;">
    <h2>Section 2</h2>
    
This is the second section of the document.
  </div>
</div>
<button (click)="generatePDF()">Generate PDF</button>

在 Angular 和 typescript 中使用 html2canvas 生成 PDF 文档时，你需要先将 HTML 元素转换为画布，然后使用 JSPDF 库将画布内容生成 PDF。首先安装 html2canvas 和 JSPDF 库，然后在你的组件中引入这两个库，最后使用 html2canvas 渲染带有 CSS 样式的 HTML 元素，接着将生成的画布转换为图像，并使用 JSPDF 的 addImage 方法将图像添加到 PDF 中。