Typescript - how to correctly use jsPDF in Angular2?

Question

I have created an Angular2 application that generates JSON data. I want to save this JSON output into a file, preferably a PDF file. This application is written using Typescript.

I have used jsPDF for writing the JSON data into a PDF file. I have installed jsPDF package via npm using

npm install jspdf --save

. I have also added necessary links in index.html page. I made these changes to my application when it was running. I was able to save the JSON data to the file.

When I stopped and restarted the application, it did not start as expected. I got the following error:

json-excel@1.0.0 start C:\Users*****\Documents\Projects\Angular\json-to-pdf

tsc && concurrently "npm run tsc:w" "npm run lite"

app/components/app.component.ts(35,19): error TS2304: Cannot find name 'jsPDF'.

I'm adding the code that I have used.

package.json:

"dependencies": {

     "@angular/common": "2.0.0-rc.1",

     "@angular/compiler": "2.0.0-rc.1",

     "@angular/core": "2.0.0-rc.1",

     "@angular/http": "2.0.0-rc.1",

     "@angular/platform-browser": "2.0.0-rc.1",

     "@angular/platform-browser-dynamic": "2.0.0-rc.1",

     "@angular/router": "2.0.0-rc.1",

     "@angular/router-deprecated": "2.0.0-rc.1",

     "@angular/upgrade": "2.0.0-rc.1",

     "angular2-in-memory-web-api": "0.0.7",

     "bootstrap": "^3.3.6",

     "es6-shim": "^0.35.0",

     "jquery": "^2.2.4",

     "jspdf": "^1.2.61",

     "reflect-metadata": "^0.1.3",

     "rxjs": "5.0.0-beta.6",

     "systemjs": "0.19.27",

     "zone.js": "^0.6.12"

}

index.html:

<html>

  <head>

    <title>JSON to PDF</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    ....



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>



    ....



  </head>



  <!-- 3. Display the application -->

  <body class="bg">

    <div>

      <app>Loading...</app>

    </div>

  </body>

</html>

app.component.ts:

 import {Component} from '@angular/core';

 @Component({

   selector: 'app',

   template: `<button (click)="createFile()">Export JSON to PDF</button>`

 })

 export class AppComponent {

     public item = {

        "Name" : "XYZ",

         "Age" : "22",

         "Gender" : "Male"

     }

     constructor() {}

     createFile(){

        var doc = new jsPDF();

        var i=0;

        for(var key in this.item){

           doc.text(20, 10 + i, key + ": " + this.item[key]);

           i+=10;

        }

        doc.save('Test.pdf');

    }

 }

I think some import statement is missing in the app.component.ts file. Can someone point to the correct import statement if that is what is missing? If that is the error that I have made, can I know how to correctly us jsPDF in Angular2?

Thank you.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

Typescript - how to correctly use jsPDF in Angular2?

Sign up