作为开发人员，很多时候我们需要将 HTML 内容转换为图像格式或 pdf 格式保存，以便作为报告发送到用户的电子邮件。因此，在这里我将解释如何在 Angular 应用程序中将 HTML 内容转换为 PDF 文件。对于该任务，我将使用 NPM 包 jspdf。
让我们开始吧
第 1 步：使用 CLI 创建 Angular 应用程序
使用以下命令创建一个角度应用程序并移入项目文件夹，
ng new angular-to-pdfcd angular-to-pdf
第2步：安装依赖项：
如前所述，要安装所需的其他依赖库
npm install jspdfnpm install html2canvas
第3步：更新ponent.ts文件
我们需要更新 ts 文件来执行所需的任务，因此打开 ponent.ts 文件并输入以下代码：
import {Component, OnInit, ElementRef ,ViewChild} from '@angular/core';import * as jspdf from 'jspdf';import html2canvas from 'html2canvas';@Component({selector: 'app-root',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class AppComponent {title = 'html-to-pdf-angular-application';public convetToPDF(){var data = document.getElementById('contentToConvert');html2canvas(data).then(canvas => {// Few necessary setting optionsvar imgWidth = 208;var pageHeight = 295;var imgHeight = canvas.height * imgWidth / canvas.width;var heightLeft = imgHeight;const contentDataURL = canvas.toDataURL('image/png')let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDFvar position = 0;pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)pdf.save('new-file.pdf'); // Generated PDF});}}
在上面的文件中，我们在顶部的 ts 文件中导入了 jspdf 和 html2canvas 库。下面我们有一个方法，我们将在 html 文件中单击按钮时调用该方法，在该方法中我们从 id contentToConvert 获取内容并将其转换为 pdf 文件。
步骤 4：更新 ponent.html 文件
<!--The content below is only a placeholder and can be replaced.--><div><strong>Html To PDF in Angular Application</strong></div><div><input type="button" value="Convert" (click)="convetToPDF()"/></div><pre><div id="content"><div></div></div><div><table id="contentToConvert"><tbody><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr></tbody></table></div></pre>
在上面的文件中，我们有一个表格形式的虚拟内容，它将转换为 pdf 文件，并且顶部有一个按钮，用于单击正在传递的创建 pdf 文件的请求。
第 5 步：运行应用程序
完成所有必要的步骤后，使用以下命令运行应用程序
ng serve
运行上述命令后通过浏览器检查应用程序。
结论
所以在这个演示中，我们学习将 HTML 内容转换为图像。您可以找到Angular 示例项目的其他演示
目前为止就这样了。感谢您的阅读，我希望这个演示对于将 HTML 内容转换为 pdf 文件非常有帮助。
