How To Convert HTML Page To PDF In Angular 11?

In this tutorial, you and I learn how to convert HTML pages to pdf in angular 11. Angular 11 HTML to pdf example. how to implement an Angular 11 generate pdf from HTML.

This tutorial will use jspdf, html2canvas, and jspdf package for generating pdf files from HTML. any project Many times we get the requirement to convert HTML to pdf in angular content to save in image format or pdf format for sending a report to users email many times. So, here I am going to explain about converting angular HTML to PDF content into PDF files in angular application. And will help you step by step on how to generate HTML to pdf angular 11 app.

How To Convert HTML Page To PDF In Angular 11?

Step 1: Create an Angular app using CLI

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

ng new angular-to-pdf

Step 2: Install dependencies:

This step As discussed earlier, Going to install the other dependency library needed:

npm install jspdf
npm install html2canvas

Step 3: update app.component.ts file

This step 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 below 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 above file, we have imported the jspdf and html2canvas library in our ts file in convert HTML to pdf angular. Below that we have a method in which we will create a button click from an HTML file, we are getting the content from the id content to convert and converting it to the pdf file. We learn how to convert HTML page to 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 with the below command

ng serve --o

Check the app over the browser after running the above command.

I hope it can help you...

Angular

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.