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';
Answer from Greg on Stack Overflow
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');
    }
}
Discussions

How to convert HTML content to PDF in Angular
I am trying to generate the PDF file from HTML content. contentDataURL is having the empty image data. I have tried changing the HTML content also but the same empty image is getting generated. Wha... More on stackoverflow.com
🌐 stackoverflow.com
December 1, 2020
how to set top and bottom margin in .HTML using jspdf
Hi, how did you solve this? More on reddit.com
🌐 r/Angular2
1
1
December 17, 2020
anyone experience with jsPDF? My image is cut off
Set the 5th and 6th parameters of your addImage to be the exact width and height of the image in the units you specified at the start of your code. It should be "pt", "mm", "cm", "m", "in" or "px". It defaults to mm, so assume you're giving measurements in mm if you haven't defined the unit. If there's no luck with that I'd also try omitting the width/height. Try this and see what happens: pdf.addImage(img, 'PNG', 0, 0); More on reddit.com
🌐 r/learnjavascript
3
1
August 12, 2019
Can I access the HTML of a component that is simply created in a TS file and not included in the actual app?
Can you provide some code? More on reddit.com
🌐 r/angular
5
7
February 18, 2016
🌐
Nutrient
nutrient.io › blog › sdk › how to generate pdfs using angular
Generating PDFs in Angular with jsPDF and Nutrient Web SDK
July 16, 2025 - To generate PDFs in Angular, you’ll use two libraries: jspdf(opens in a new tab) and jspdf-autotable(opens in a new tab). Install them using npm: ... These packages will enable you to create and customize PDFs within your Angular application.
🌐
C# Corner
c-sharpcorner.com › article › html-to-pdf-using-jspdf-in-angular
HTML To PDF Using JSPDF In Angular
February 13, 2023 - 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','test.pdf'); } } ... In this article, I have discussed about implementation of JSPDF in Angular.
🌐
DEV Community
dev.to › vidyarathna › generating-pdfs-in-angular-using-jspdf-3a6
Generating PDFs in Angular using jsPDF - DEV Community
May 29, 2024 - import { Injectable } from '@angular/core'; import { jsPDF } from 'jspdf'; @Injectable({ providedIn: 'root' }) export class PdfService { constructor() { } generatePdf() { const doc = new jsPDF(); doc.text('Hello world!', 10, 10); doc.save('sample.pdf'); } } Next, generate a new component where you will add a button to trigger the PDF generation: ... In pdf-generator.component.ts, inject the PDF service and create a method to call the generatePdf function: import { Component } from '@angular/core'; import { PdfService } from '../pdf.service'; @Component({ selector: 'app-pdf-generator', templateUrl: './pdf-generator.component.html', styleUrls: ['./pdf-generator.component.css'] }) export class PdfGeneratorComponent { constructor(private pdfService: PdfService) { } generatePdf() { this.pdfService.generatePdf(); } }
🌐
Kumar Gandhi Koppolu
kumargandhi.in › 2022 › 07 › 21 › export-html-content-to-pdf-file-in-angular-using-jspdf
Export html content to PDF file in Angular using JSPDF. – Kumar Gandhi Koppolu
July 21, 2022 - We want to export the above Html content to the PDF file. But the · html method in the JSPDF is expecting HTMLElement so to get this object instance of our html content we need to declare the above div element in our component by referencing the id
Find elsewhere
🌐
Coding Diksha
codingdiksha.com › home › angular › angular 12 convert html to pdf using jspdf & html2canvas
Angular 12 Convert HTML to PDF using jsPDF & html2canvas
October 15, 2021 - In this tutorial, I am going to teach you “How to Convert HTML to PDF using jsPDF & html2canvas in Angular 12”.
🌐
C# Corner
c-sharpcorner.com › article › convert-html-to-pdf-using-angular-6
Convert HTML To PDF Using Angular 6
May 7, 2020 - import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core'; ... } As you can see in the above code snippet, I have created one method called captureScreen(), which generates document and will add image into the document and lastly, will save it on a local system. For that, I have provided a few settings, like image height, width, left margin, etc. JsDF has a syntax that decides its layout when it generates the PDF. ... ); After initialization of JsPDF, I am going to put the image into my document, using pdf.addImage(), which is used to use the image into our document.
🌐
The Code Hubs
thecodehubs.com › how-to-convert-html-to-pdf-in-angular-9
How To Convert HTML To PDF In Angular 9 – The Code Hubs
May 12, 2020 - import { Component } from '@angular/core'; import * as jspdf from 'jspdf'; import html2canvas from 'html2canvas'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'html-to-pdf'; generatePDF() { var data = document.getElementById('contentToConvert'); html2canvas(data).then(canvas => { var imgWidth = 208; var imgHeight = canvas.height * imgWidth / canvas.width; const contentDataURL = canvas.toDataURL('image/png') let pdf = new jspdf('p', 'mm', 'a4'); var position = 0; pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight) pdf.save('newPDF.pdf'); }); } } Output: Please give your valuable feedback and if you have any questions or issues about this article, please let me know.
🌐
PSPDFKit
pspdfkit.com › blog › 2024 › how-to-generate-pdfs-using-angular
How to Use jsPDF and Angular to Generate PDFs
July 16, 2025 - To generate PDFs in Angular, you’ll use two libraries: jspdf(opens in a new tab) and jspdf-autotable(opens in a new tab). Install them using npm: ... These packages will enable you to create and customize PDFs within your Angular application.
🌐
YouTube
youtube.com › watch
Angular 13 jsPDF Project to Export HTML Div,Table With CSS to PDF Document Using TypeScript - YouTube
Buy the full source code of application here:https://procodestore.com/index.php/product/angular-13-jspdf-project-to-export-html-divtable-with-css-to-pdf-docu...
Published   January 21, 2022
🌐
Expert Code Blog
expertcodeblog.wordpress.com › 2018 › 07 › 24 › angular-html-to-pdf
Angular: HTML to PDF with htm2canvas and jsPDF | Expert Code Blog
August 3, 2018 - After we had import the npm packages of this tool, into our class we can create a method that esports the HTLM content into PDF: import * as jsPDF from 'jspdf' import * as html2canvas from "html2canvas"; export class MyComponent { public printPdf() ...