How To Convert HTML Page To PDF In Angular 11

In this tutorial, We will learn how to convert HTML pages into pdf into angular 11. Angular 11 HTML to pdf example. how to make Angular 11 produce pdf from HTML.

This tutorial will use jspdf, html2canvas, and jspdf package to generate pdf files with HTML. any project Many times we find the requirement to convert HTML to pdf in angular content to save in image format or pdf format for sending feedback to email users multiple times. So, here I am going to explain about converting angular HTML into PDF content into PDF files in an angular application. It will also help you step by step how to create HTML in pdf angular 11 application.

Step 1: Create an Angular app using CLI

First of all, We Create an angular app with using following  command and move it into the project folder to convert HTML to pdf Angular:

ng new angular-to-pdf

Step 2: Install dependencies:

install the other dependency libraries:

npm install jspdf
npm install html2canvas
<pre></pre>

Step 3: update app.component.ts file

We need to update the ts file to perform the required task is a pdf js angular 11, So open the app.component.ts file and put the following code:

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
        });
    }
}

In the file above, we have included the jspdf library and html2canvas in our ts file for converting HTML to pdf angular. Below we have a way to create a click of an HTML file, we find the content of the id to convert it and convert it into a pdf file. We are learning to convert HTML page into PDF In Angular 11.

Step 4: Update app.component.html file

<div>
   <strong>How To Convert HTML Page To PDF In Angular 11? - phpcodingstuff.com</strong>
</div>
<div>
   <input type="button" value="Convert" (click)="convetToPDF()"/>
</div>
<div>
   <table id="contentToConvert">
      <tbody>
         <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
         </tr>
         <tr>
            <td>A Company</td>
            <td>Robert look</td>
            <td>Germany</td>
         </tr>
         <tr>
            <td>B Company</td>
            <td>Chnage</td>
            <td>Mexico</td>
         </tr>
         <tr>
            <td>C Company</td>
            <td>Mantodal</td>
            <td>Austria</td>
         </tr>
         <tr>
            <td>D Company</td>
            <td>Heltenosolu</td>
            <td>UK</td>
         </tr>
         <tr>
            <td>E Company</td>
            <td>tatumore</td>
            <td>Canada</td>
         </tr>
         <tr>
            <td>F Company</td>
            <td>verlose</td>
            <td>Italy</td>
         </tr>
      </tbody>
   </table>
</div>

In the above file, We have a dummy content in this form which will be converted into a pdf file and a button at the top on clicking which request is passing for pdf file then convert HTML page to pdf in angular 11.

Step 5: Run the app

After completing all the needed steps, Run the app to execute the below command:

ng serve --o

I hope it can help you...