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 -</h2>

    <table class="table">
  <button class="btn btn-primary" (click)="downloadAsPDF();">Export To PDF</button>


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;

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

  pdfTable!: ElementRef;
  public downloadAsPDF() {
    const pdfTable = this.pdfTable.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: html };

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



Leave a Comment

Your email address will not be published. Required fields are marked *

istanbul escortHacklinkartvin escortGiresun escortEscortporno izleizmir escortsincan escortistanbul escortizmir escortGaziantep escortşişli escortkartal escortbodrum escortAntalya escortMarmaris escortpornoankara escortistanbul escort çilingironwin girişHacklink satın alçankaya escortAyvalık Escortkütahya escortgümüşhane escortAksaray escortaydın escortkayseri escortçankaya escortkızılay escortkeçiören escorthepabeteryaman escortKiralık Bahis Siteleribonus veren sitelerKiralık Bahis SiteleriKiralık Bahis SayfasıAviator oynaCasinoslotdiyarbet girişgates of olympus oynasugar rush oynaSweet bonanza demowild west gold demo oynabodrum escortbodrum escortçeşme escortbig bass bonanza
Diş eti ağrısıankara kocaeli nakliyatgüvenlik bariyerisakarya evden eve nakliyatgaziantep evden eve nakliyatnargilehttps://www.orneknakliyat.comseowordpress en iyi seo eklentileripuro satın alizmir saç ekimiistanbul evden eve nakliyatimplantbebekeskişehir inşaat şirketleriantika eşya alanlarantika eşya alanlarantalya haberpgcdpmsagaziantep boşanma avukatıAntika alan yerlermaltepe antika eşya alanlarGaziantep Evden Eve TaşımacılıkGaziantep Halı Yıkamaizmir escortetiler antika eşya alanlaretiler antika eşya alanlarantika alanlarAccident LawyerDental Implantiqoseskişehir pelet kazanı