Convert HTML to PDF using Angular's JSPDF | RAJESH GAMI

 Summary

This article describes how to use JSDPF in Angular to generate PDFs from HTML. For better understanding, here is an example of using JSDPF to generate a PDF from HTML.
This jsPDF plugin adds the ability to parse HTML tables or use Javascript data directly to generate PDF tables.

jsPDF is a JavaScript-based module. It is used to generate PDFs on the client side and provides a variety of easy ways to adjust the PDF view.

We can also modify size,Orientation,UI and other features also available.

Requirement

• Angular >2
• HTML / Bootstrap

In this article, I used Angular 12 to create an Angular project. To create an Angular project, you need to perform the following steps:
Creating a project
I created a project using the following command at the command prompt:

Creating Project

I created a project using the following command at the command prompt:

ng new JsPDFExample

JavaScript

Open the project in Visual Studio Code using the following command:

cd JsPDFExample
Code .

JavaScript

Now your project looks like this in Visual Studio:  

Installation

Install JSPDF using the below command,

npm install jspdf jspdf-autotable

JavaScript

App.module.ts

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

@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent, ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

JavaScript

app.component.html

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

<table id="table">
  <tr>
    <th style="width:300px">Player</th>
    <th style="width:100px">Span</th>
    <th style="width:100px">Run</th>
  </tr>
  <tr>
    <td>Rajesh Gami</td>
    <td>2010-2020</td>
    <td>11000</td>
  </tr>
  <tr>
    <td>Vishal Gami</td>
    <td>2012-2022</td>
    <td>14045</td>
  </tr>
  <tr>
    <td>Subhash Saliya</td>
    <td>1999-2011</td>
    <td>10500</td>
  </tr>
  <tr>
    <td>Mahesh S</td>
    <td>2014-2018</td>
    <td>7500</td>
  </tr>
</table>

JavaScript

app.component.ts

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

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

  getBase64Image(img) {
    var canvas = document.createElement("canvas");
    console.log("image");
    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'});
   doc.output('datauri','rajesh_demo.pdf');
  }
}

JavaScript

Let's run the project and see the result

You can download PDF by clicking on the download icon

For more detail click here