如何在 Angular 应用程序中将 HTML 页面转换为 PDF

作为开发人员，很多时候我们需要将 HTML 内容转换为图像格式或 pdf 格式保存，以便作为报告发送到用户的电子邮件。因此，在这里我将解释如何在 Angular 应用程序中将 HTML 内容转换为 PDF 文件。对于该任务，我将使用 NPM 包 jspdf。

让我们开始吧
第 1 步：使用 CLI 创建 Angular 应用程序
使用以下命令创建一个角度应用程序并移入项目文件夹，

ng new angular-to-pdf

cd angular-to-pdf

第2步：安装依赖项：
如前所述，要安装所需的其他依赖库

npm install jspdf

npm install html2canvas

第3步：更新app.component.ts文件
我们需要更新 ts 文件来执行所需的任务，因此打开 app.component.ts 文件并输入以下代码：

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'html-to-pdf-angular-application';
public convetToPDF()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var 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 PDF
var 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：更新 app.component.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 文件非常有帮助。