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');
        }
    }
Answer from Alciomar Hollanda on Stack Overflow
🌐
npm
npmjs.com › package › jspdf-autotable
jspdf-autotable - npm
--></table> autoTable(doc, { html: '#my-table' }) // Or use javascript directly: autoTable(doc, { head: [['Name', 'Email', 'Country']], body: [ ['David', '[email protected]', 'Sweden'], ['Castille', '[email protected]', 'Spain'], // ... ], }) doc.save('table.pdf') You can also use the plugin methods directly on the jsPDF documents:
      » npm install jspdf-autotable
    
Published   Feb 26, 2025
Version   5.0.2
Author   Simon Bengtsson
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)

🌐
GitHub
github.com › JonatanPe › jsPDF-AutoTable
GitHub - JonatanPe/jsPDF-AutoTable
var columns = [ {title: "ID", dataKey: "id"}, {title: "Name", dataKey: "name"}, {title: "Country", dataKey: "country"}, ... ]; var rows = [ {"id": 1, "name": "Shaw", "country": "Tanzania", ...}, {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...}, {"id": 3, "name": "Garcia", "country": "Madagascar", ...}, ... ]; // Only pt supported (not mm or in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: {fillColor: [100, 255, 255]}, columnStyles: { id: {fillColor: 255} }, margin: {top: 60}, addPageContent: function(data) { doc.text("Header", 40, 30); } }); doc.save('table.pdf'); See other examples in /examples/examples.js which is also the source code for the demo documents. In an angular cli project run npm install jspdf-autotable --save
Starred by 17 users
Forked by 4 users
Languages   TypeScript 81.5% | JavaScript 18.5%
🌐
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.
Find elsewhere
🌐
YouTube
youtube.com › watch
jsPDF-Autotable Tutorial | Convert to Table to PDF in Angular - YouTube
Buy the full source code of the application at Paypal in USD Currency here:https://procodestore.com/index.php/product/jspdf-autotable-tutorial-convert-to-tab...
Published   October 1, 2019
🌐
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).
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 344
In Angular 5 , getting issues with autoTable does not exist jsPDF · Issue #344 · simonbengtsson/jsPDF-AutoTable
October 15, 2017 - // Only pt supported (not mm or in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows); doc.save('table.pdf');
Published   Mar 27, 2018
🌐
Openbase
openbase.com › js › jspdf-autotable › tutorials
jspdf-autotable: Tutorials | Openbase
In this post I will be talking about Generating Pdf with jsPDF & AutoTable.So let’s get started with the application. <table border=“1” id=“example” class=“sfc_table”> <thead> <tr> <th>PART NUMBER</th> <th>COST</th> </tr> </thead> <tbody> <tr> <td cols… ... Angular tutorial to convert Tabular data into download document of PDF type.
🌐
Simonbengtsson
simonbengtsson.github.io › jsPDF-AutoTable
AutoTable sample
It appears you don't have PDF support in this web browser. Click here to download the PDF
🌐
DEV Community
dev.to › maxwelladn › build-a-pdf-invoice-template-using-only-typescript-and-jspdf-autotable-25gn
Build a PDF invoice template using only typescript and jspdf-autotable | No screen capture - DEV Community
February 22, 2022 - // app.component.ts import { Component } from '@angular/core'; import jsPDF from 'jspdf'; import autoTable from 'jspdf-autotable'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { public downloadInvoice(){ const doc = new jsPDF(); autoTable(doc, { body: [ [ { content: 'Company brand', styles: { halign: 'left', fontSize: 20, textColor: '#ffffff' } }, { content: 'Invoice', styles: { halign: 'right', fontSize: 20, textColor: '#ffffff' } } ], ], theme: 'plain', styles: { fillColor: '#3366ff' } }); autoTable(d
🌐
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'); } } Let's Run the Project ·
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 384
Unable to use it in Angular 2 · Issue #384 · simonbengtsson/jsPDF-AutoTable
Add these scripts into angular.json file "../node_modules/jspdf/dist/jspdf.min.js", "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 845
dataKey not work in angular · Issue #845 · simonbengtsson/jsPDF-AutoTable
November 11, 2021 - head = [{title: 'توضیحات', dataKey: 'MoreDescribe'}, {title: 'امکانات', dataKey: 'properties'}, {title: 'مبلغ خرید', dataKey: 'id'}] body = [ [{content: ' قابل استفاده'}, {content: 'اندازه مناسب'}, {content: '10000 تومان'}], [{content: ' قابل استفاده'}, {content: 'اندازه مناسب'}, {content: '10000 تومان'}], [{content: ' قابل استفاده'}, {content: 'اندازه مناسب'}, {content: '10000 تومان'}] ] printAll(){ const doc = new jsPDF(); autoTable(doc, { head: [this.head], body: this.body, headStyles: { font: 'Shabnam',halign: 'center',valign: "middle"}, // work bodyStyles: { font: 'Shabnam', halign: 'center', valign: "middle" }, // work columnStyles: { id: { cellWidth: 5000 },properties:{cellWidth:700},MoreDescribe:{cellWidth:500} } // not work }) }
Published   Nov 11, 2021
🌐
StackBlitz
stackblitz.com › edit › angular-ivy-9rp3tq
jsPDF-autoTable - Performance - StackBlitz
An Angular project based on rxjs, jspdf, tslib, zone.js, @angular/core, @angular/forms, @angular/common, @angular/router, jspdf-autotable, @angular/compiler, @angular/animations, @babel/runtime-corejs3, @angular/platform-browser and @angular/platform-browser-dynamic
🌐
jsDocs.io
jsdocs.io › package › jspdf-autotable
[email protected] - jsDocs.io
type autoTableInstanceType = (options: UserOptions) => void; type CellHook = (data: CellHookData) => void | boolean; type CellInput = null | string | string[] | number | boolean | CellDef; ... No dependencies. ... To add a badge like this oneto your package's README, use the codes available below. You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/jspdf-autotable.
🌐
Coding Shiksha
codingshiksha.com › home › angular jspdf-autotable to export html table to pdf document in browser using typescript
Angular jsPDF-Autotable to Export HTML Table to PDF Document in Browser Using TypeScript - Coding Shiksha
January 30, 2025 - npm i jspdf app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent }…