I have done it, after doing lot of R&D , their are few steps to follow as below : Install :

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

html:

<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}
Answer from GsMalhotra on Stack Overflow
๐ŸŒ
Nutrient
nutrient.io โ€บ blog โ€บ sdk โ€บ how to generate pdfs using angular
Generating PDFs in Angular with jsPDF and Nutrient Web SDK
July 16, 2025 - Here, the code defines an Angular component named PdfGeneratorComponent that generates a PDF document with text and a table when a button is clicked. It uses the jsPDF library for PDF creation and jspdf-autotable for building tables within the PDF.
๐ŸŒ
DEV Community
dev.to โ€บ vidyarathna โ€บ generating-pdfs-in-angular-using-jspdf-3a6
Generating PDFs in Angular using jsPDF - DEV Community
May 29, 2024 - Integrating jsPDF into your Angular project allows you to create PDF documents dynamically within your application. By following the steps outlined above, you can set up jsPDF, create a service for PDF generation, and trigger this functionality ...
๐ŸŒ
npm
npmjs.com โ€บ package โ€บ jspdf
jspdf - npm
PDF Document creation from JavaScript. Latest version: 3.0.4, last published: a month ago. Start using jspdf in your project by running `npm i jspdf`. There are 2054 other projects in the npm registry using jspdf.
      ยป npm install jspdf
    
Published ย  Nov 19, 2025
Version ย  3.0.4
Top answer
1 of 5
84

I have done it, after doing lot of R&D , their are few steps to follow as below : Install :

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

html:

<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}
2 of 5
11

Old question but this is an alternative solution that I got up and running in my angular app. I ended up modifying this jsPDF solution to work without using the ionic/cordova CLI.

npm install jspdf --save
npm install @types/jspdf --save
npm install html2canvas --save
npm install @types/html2canvas --save

Add an id to whichever div contains the content you want to generate the PDF

<div id="html2Pdf">your content here</div>

Import the libraries

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

Add the method for generating the PDF

generatePdf() {
    const div = document.getElementById("html2Pdf");
    const options = {background: "white", height: div.clientHeight, width: div.clientWidth};

    html2canvas(div, options).then((canvas) => {
        //Initialize JSPDF
        let doc = new jsPDF("p", "mm", "a4");
        //Converting canvas to Image
        let imgData = canvas.toDataURL("image/PNG");
        //Add image Canvas to PDF
        doc.addImage(imgData, 'PNG', 20, 20);

        let pdfOutput = doc.output();
        // using ArrayBuffer will allow you to put image inside PDF
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (let i = 0; i < pdfOutput.length; i++) {
            array[i] = pdfOutput.charCodeAt(i);
        }

        //Name of pdf
        const fileName = "example.pdf";

        // Make file
        doc.save(fileName);

    });
}

I found this solution worked well for my web app and was beneficial as I have control over when I want to generate the PDF (after receiving data asynchronously). As well, I didn't need install any libraries globally.

๐ŸŒ
C# Corner
c-sharpcorner.com โ€บ article โ€บ html-to-pdf-using-jspdf-in-angular
HTML To PDF Using JSPDF In Angular
February 13, 2023 - 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.
๐ŸŒ
Medium
medium.com โ€บ @berkayyyulguel โ€บ angular-convert-html-to-pdf-via-jspdf-8c63c8c61ad9
Converting HTML documents to PDF using jsPDF and Angular | by Berkay รœlgรผel | Medium
May 10, 2022 - Converting HTML documents to PDF using jsPDF and Angular Hey, devs! In this article, I will guide you to export pure HTML elements to PDF with the advantages of the library called jsPDF. The code in โ€ฆ
๐ŸŒ
YouTube
youtube.com โ€บ watch
How to generate PDF with Angular and JSPDF - YouTube
In this tutorial we take a look at how to use JSPDF to generate PDF in an angular application.Here are few commands you will need to do before writing code. ...
Published ย  March 25, 2021
Find elsewhere
Top answer
1 of 6
22

What I found worked was adding:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

to the index.html file (it could presumably be elsewhere).

I then used:

const elementToPrint = document.getElementById('foo'); //The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
    doc.save('web.pdf');
});

Which no longer uses html2canvas in the code.
You can then remove the following import:

import * as html2canvas from 'html2canvas';
2 of 6
9

In case someone prefer not to use cdn scripts & would like to use a more (angular) way, this worked for me in Angular 6:

Using this way will give you better support & autocomplete in the editor & will help you avoid depending on cdn scripts (if you wanna avoid them, like me)

Based on the excellent answer here & since it was hard for me to find that answer, I am re-sharing what was stated in it & helped me use jsPDF in Angular 6 (all credit goes to the original author of this answer)

You should run these cmds:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

html:

<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}
Top answer
1 of 4
20

After trying so many different solutions for this issue now I've found that both the addHTML and fromHTML is depreciated in latest versions of jspdf and they are replaced with just html. For those who are seeking for a better solution to work with jspdf and Angular 10 here is what looks working and a better result that I've found so far.

To import jspdf version (2.x.x), just simply do: import { jsPDF } from 'jspdf';.

You won't need to include any of the dependencies into angular.json scripts like you would do in previous versions. And if you add scripts of jspdf or html2canvas insideindex.html, also remove them. By running npm install jspdf it also install the html2canvas which is also dynamically imported by jspdf.

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

.....

 @ViewChild('couponPage', { static: true }) couponPage: ElementRef;

.......

openPDF(): void {
  const DATA = this.couponPage.nativeElement;
  const doc: jsPDF = new jsPDF("p", "mm", "a4");
  doc.html(DATA, {
     callback: (doc) => {
       doc.output("dataurlnewwindow");
     }
  });
}

Though for me still using doc.html() method, it wouldn't use the css style that I used for my page.

2 of 4
3

After working with the OP for a short time on a stackblitz, it seems the main problem was that the usage of the library changed between versions 1.3.5 (the one used in the examples) to 2.1.0 (the one he was using). I am adding this answer so that it may provide a clue to future solution seekers who suffer from a similar problem.

๐ŸŒ
Kumar Gandhi Koppolu
kumargandhi.in โ€บ 2021 โ€บ 10 โ€บ 28 โ€บ export-pdf-in-angular-using-jspdf
Export PDF in Angular with JSPDF. โ€“ Kumar Gandhi Koppolu
September 27, 2022 - Adding Bootstrap to Angular ... all the bootstrap styles but you wouldn't need that. @import './node_modules/bootstrap/scss/bootstrap'; Install jspdf....
๐ŸŒ
Freakyjolly
freakyjolly.com โ€บ angular-jspdf-autotable-tutorial
Angular 9|8|7 Convert Tables into PDF File using jspdf-autotable Example
April 30, 2023 - Angular tutorial to convert Tabular data into download document of PDF type. We can convert dynamic data into a table using a jsPDF Autotable library which can be converted into a PDF file to download or open in a new browser tab. In this article, we will learn How to install and use the ...
๐ŸŒ
StackBlitz
stackblitz.com โ€บ edit โ€บ angular-jspdf
Angular Jspdf - StackBlitz
Starter project for Angular apps that exports to the Angular CLI
๐ŸŒ
Codez Up
codezup.com โ€บ home โ€บ angular 7|8|9|10 export table data to pdf using jspdf
Angular 7|8|9|10 Export Table Data to PDF using jsPDF | Codez Up
October 13, 2021 - In this tutorial, we will learn how to export or save table data into the pdf file in Angular using the jsPDF library and step by step how to
Top answer
1 of 11
15

Is working for me Angular 5.

To work with jspdf-autotable in angular 5, one must install jspdf and jspdf-autotable via npm

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

also add the jspdf and jspdf-autotable files to the scripts array in angular-cli.json

"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

and in component never import jspdf or jspdf-autotable just.

Forget about the following import.


    import * as jsPDF from 'jspdf'; 
    import 'jspdf-autotable';


Just use Before @Component:

declare var jsPDF: any;

Your component (related parts ):

declare var jsPDF: any;

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})

export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // typescript compile time error
        doc.save('table.pdf');
        }
    }
2 of 11
12

I was able to please TypeScript like this:

import jsPDF from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';

interface jsPDFWithPlugin extends jsPDF {
  autoTable: (options: UserOptions) => jsPDF;
}
...
const doc = new jsPDF('portrait', 'px', 'a4') as jsPDFWithPlugin;
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', '[email protected]', 'Sweden'],
    ['Castille', '[email protected]', 'Norway']
  ]
});

Works in Angular 7 (also works in Angular 14)

๐ŸŒ
GeeksforGeeks
geeksforgeeks.org โ€บ angularjs โ€บ how-to-export-data-as-pdf-in-angular
How To Export Data As PDF in Angular? - GeeksforGeeks
July 23, 2025 - After this tutorial You have successfully implemented the functionality to export data to PDF in Angular using jsPDF and html2canvas, this approach works with static content as well as dynamically generated content, this makes it highly flexible ...