Sudhashri S Hebbar Sudhashri S Hebbar - 4 years ago 1014
TypeScript Question

Typescript - how to correctly use jsPDF in Angular2?

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download