How to Export PDF from HTML in Angular 12

Generate PDF file from HTML template in Angular 2+ application; In this tutorial, we will discuss how to convert the PDF file from HTML content on-page in Angular application.

PDF means Portable Document Format, it is used to share information in the form of documents. PDF files are more secure than any other format as the data cannot be changed after it is created. Moreover, the PDF files can be shared and printed as a hard copy.

Today, almost every application has the feature to download PDF files from different types of data. A user can download invoices, bills, articles, reports etc. As a portable document, we can keep it offline for later consumption instead of viewing the same detail using the network.

In this tutorial, we will learn how to implement export to PDF from HTML feature in Angular application by using profound library packages including pdfmake, html-to-pdfmake and jspdf.

 

How to Export PDF files from HTML in Angular 12 application?

We will go through these quick steps to implement the export excel file feature from JSON data.

1. Create Angular Application
2. Install PDF Packages
3. Configure App Module
4. Update App Component Template
5. Update App Component Class
6. Run Angular Application

 

Create Angular Application

Before creating the Angular application, make sure you have Angular CLI installed on your system.

$ <span class="token function">npm</span> <span class="token function">install</span> -g @angular/cli

After that, you are ready to create a new Angular project. Execute below CLI command to create a new angular application.

$ ng new angular-html-to-pdf-app

Move into the project directory

$ <span class="token function">cd</span> angular-html-to-pdf-app

 

Install Bootstrap and PrimeNG Packages

Next, install few library packages required to convert the HTML content into PDF files.

Head towards the terminal window set to the application root, and execute below npm command to install all packages at once.

$ npm install pdfmake html-to-pdfmake jspdf --save

 

Update App Component Template

In the HTML template, we need to add a template variable as we have here as #pdfTable. This will take our reference to let the method know which content needs to be converted as a PDF.

Now, open the app.component.html file, and update it with the below code.

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example - FreakyJolly.com</h2>

    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF();">Export To PDF</button>
</div>

 

Update App Component Class

Now, open the app.component.ts file and update it with the following code

import { Component, ElementRef, ViewChild } from '@angular/core';

declare var require: any;

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from "pdfmake/build/vfs_fonts";
const htmlToPdfmake = require("html-to-pdfmake");
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  @ViewChild('pdfTable')
  pdfTable!: ElementRef;
  
  public downloadAsPDF() {
    const pdfTable = this.pdfTable.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).download(); 
     
  }
}

Run Angular Application

That’s it, now you can run your Angular application by hitting

$ ng serve --open

 

This will open the application in the browser at default port 4200 on the following URL

http://localhost:4200/