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

梦里梦外; 2024-03-23 18:19 107阅读 0赞

作为开发人员，很多时候我们需要将 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 文件

<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 文件非常有帮助。