HTML To PDF Using JSPDF In Angular


In this article, I will explain how to generate pdf from html using JSDPF in angular.  I will give example for generate pdf from html using JSDPF for better understanding.

This jsPDF plugin adds the ability to generate PDF tables either by parsing HTML tables or by using Javascript data directly.

Html to Pdf using jspdf in angular


  • Angular 12
  • HTML/Bootstrap

For this article, I have created an Angular project using Angular 12. For creating an Angular project, we need to follow the following steps:

Create Project

I have created a project using the following command in the Command Prompt.

ng new JsPDFExample

Open a project in Visual Studio Code using the following commands.

cd JsPDFExample
Code .

Now in Visual Studio, your project looks like as below.


Get jsPDF and this plugin by doing one of these things,

npm install jspdf jspdf-autotable


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent, ],
  bootstrap:    [ AppComponent ]
export class AppModule { }


<div class="container">
  <div class="row">
    <div class="col-md-4" *ngFor="let img of images; let i = index">
        id="img{{ i }}"
    <div class="col-md-12 mt-3">
      <button (click)="download()" class="btn btn-primary">Download PDF</button>

<table id="table">
    <th style="width:300px">Player</th>
    <th style="width:100px">Span</th>
    <th style="width:100px">Run</th>
    <td>SR Tendulkar (INDIA)</td>
    <td>KC Sangakkara (Asia/ICC/SL)</td>
    <td>RT Ponting (AUS/ICC)</td>
    <td>ST Jayasuriya (Asia/SL)</td>


import { Component, OnInit } from "@angular/core";
import jsPDF from "jspdf";
import "jspdf-autotable";

  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent implements OnInit {
    ngOnInit() {}

  getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
  download() {
    let doc = new jsPDF();
    doc.autoTable({html: '#table'});

Let's Run the Project

Html to Pdf using jspdf in angular

Now Click on download PDF Button pdf will download like as below:

Html to Pdf using jspdf in angular


In this article, I have discussed about implementation of JSPDF in Angular.