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:
[email protected] 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
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.