Typescript - how to correctly use jsPDF in Angular2?
我已经创建了一个生成JSON数据的Angular2应用程序。我想将此JSON输出保存到文件(最好是PDF文件)中。此应用程序是使用Typescript编写的。
我已经使用jsPDF将JSON数据写入PDF文件。我已经使用
当我停止并重新启动该应用程序时,它没有按预期启动。我收到以下错误:
[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'.
我要添加我已使用的代码。
package.json:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | "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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> JSON to PDF <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"> .... </head> <!-- 3. Display the application --> <body class="bg"> Loading...</app> </body> </html> |
app.component.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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'); } } |
我认为app.component.ts文件中缺少一些导入语句。如果缺少正确的导入语句,可以有人指出吗?如果那是我犯的错误,我可以知道如何正确地在Angular2中使用jsPDF吗?
谢谢。
将jspdf与最新的angular cli版本一起使用非常容易。只需从npm安装jspdf并使用类似这样的东西:
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // 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'); } } |
对于基于systemjs而不是webpack的angular cli的旧版本
这里是对
使用Angular-cli和Angular 4的方式是
首先将jspdf添加到.angular-cli.json
中的Scripts数组中
1 2 3 | "scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ] |
然后在组件中添加以下
1 | import * as JSPdf from 'jspdf'; |
然后上课
1 2 3 4 5 | generatePdf() { let doc = new JSPdf(); doc.text("Hello", 20, 20); doc.save('table.pdf'); } |