i have created angular2 application generates json data. want save json output file, preferably pdf file. application written using typescript.
i have used jspdf writing json data pdf file. have installed jspdf package via npm using npm install jspdf --save. have added necessary links in index.html page. made these changes application when running. able save json data file.
when stopped , restarted application, did not start expected. got 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 code 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 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 application --> <body class="bg"> <div> <app>loading...</app> </div> </body> </html> app.component.ts:
import {component} '@angular/core'; @component({ selector: 'app', template: `<button (click)="createfile()">export json 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 import statement missing in app.component.ts file. can point correct import statement if missing? if error have made, can know how correctly jspdf in angular2?
thank you.
using jspdf latest angular cli version easy. install jspdf npm , use this:
app.component.ts
// note cannot use import jspdf 'jspdf' if // don't install jspdf types definitelytyped let jspdf = require('jspdf'); import { component } '@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 link description of 1 way work angular-cli , libraries in umd or plain javascript. involves using declare jspdf: any importing library in systemjs vendor files.
Comments
Post a Comment