Typescript - 如何在 Angular2 中正确使用 jsPDF？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38507597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript - how to correctly use jsPDF in Angular2?
提问by Sudhashri S Hebbar
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.
我创建了一个生成 JSON 数据的 Angular2 应用程序。我想将此 JSON 输出保存到文件中，最好是 PDF 文件。此应用程序是使用 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.
我使用 jsPDF 将 JSON 数据写入 PDF 文件。我已经使用npm install jspdf --save. 我还在 index.html 页面中添加了必要的链接。我在应用程序运行时对其进行了这些更改。我能够将 JSON 数据保存到文件中。
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'.
[email protected] 开始 C:\Users*****\Documents\Projects\Angular\json-to-pdf
tsc && 同时 "npm run tsc:w" "npm run lite"
app/components/app.component.ts(35,19): 错误 TS2304: 找不到名称“jsPDF”。
I'm adding the code that I have used.
我正在添加我使用过的代码。
package.json:
包.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：
<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:
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?
我认为 app.component.ts 文件中缺少一些导入语句。如果缺少什么，有人可以指出正确的导入语句吗？如果这是我犯的错误，我能知道如何在 Angular2 中正确使用 jsPDF 吗？
Thank you.
谢谢你。
回答by Simon Bengtsson
Using jspdf with the latest angular cli version is really easy. Simply install jspdf from npm and use it something like this:
在最新的 angular cli 版本中使用 jspdf 真的很容易。只需从 npm 安装 jspdf 并使用它，如下所示：
app.component.ts
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
对于基于 systemjs 而不是 webpack 的旧版本 angular cli
Here is a linkto a description of one way to work with the angular-cliand libraries in umdor plain javascript. It basically involves using declare jsPDF: anytogether with importing the library in systemjs vendor files.
这是一个链接，描述了angular-cli在umd或纯 javascript 中使用和 库的一种方法。它基本上涉及declare jsPDF: any与在 systemjs 供应商文件中导入库一起使用。
回答by Dheeraj
The way you would do using Angular-cli and Angular 4 is first add jspdf to Scripts array in .angular-cli.json
使用 Angular-cli 和 Angular 4 的方法是首先将 jspdf 添加到 .angular-cli.json 中的 Scripts 数组
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js"
]
then in the component add the following
然后在组件中添加以下内容
import * as JSPdf from 'jspdf';
then in your class
然后在你的班级
generatePdf() {
let doc = new JSPdf();
doc.text("Hello", 20, 20);
doc.save('table.pdf');
}
