Typescript - how to correctly use jsPDF in Angular2?

Using jspdf with the latest angular cli version is really easy. Simply install jspdf from npm and use it something like this:

app.component.ts

// Note that you cannot use import jsPDF from 'jspdf' if you 
// don't install jspdf types from DefinitelyTyped
let jsPDF = require('jspdf');
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor() {
    let doc = new jsPDF();
    doc.text("Hello", 20, 20);
    doc.save('table.pdf');
  }
}

For old versions of angular cli based on systemjs instead of webpack

Here is a link to a description of one way to work with the angular-cli and libraries in umd or plain javascript. It basically involves using declare jsPDF: any together with importing the library in systemjs vendor files.


The way you would do using Angular-cli and Angular 4 is first add jspdf to Scripts array in .angular-cli.json

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

then in the component add the following

import * as JSPdf from 'jspdf'; 

then in your class

  generatePdf() {
    let doc = new JSPdf();
    doc.text("Hello", 20, 20);
    doc.save('table.pdf');
}