Typescript - 如何在 Angular2 中正确使用 jsPDF？
Posted
技术标签:
【中文标题】Typescript - 如何在 Angular2 中正确使用 jsPDF？【英文标题】：Typescript - how to correctly use jsPDF in Angular2? 【发布时间】：2016-11-25 05:52:33 【问题描述】：我创建了一个生成 JSON 数据的 Angular2 应用程序。我想将此 JSON 输出保存到文件中，最好是 PDF 文件。此应用程序是使用 Typescript 编写的。
我使用 jsPDF 将 JSON 数据写入 PDF 文件。我已经使用npm install jspdf --save 通过 npm 安装了 jsPDF 包。我还在 index.html 页面中添加了必要的链接。我在应用程序运行时对其进行了这些更改。我能够将 JSON 数据保存到文件中。
当我停止并重新启动应用程序时，它没有按预期启动。我收到以下错误：
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)：错误 TS2304：找不到名称“jsPDF”。
我正在添加我使用过的代码。
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');
我认为 app.component.ts 文件中缺少一些导入语句。如果缺少什么，有人可以指出正确的导入语句吗？如果这是我犯的错误，我可以知道如何在 Angular2 中正确使用 jsPDF 吗？
谢谢。
【问题讨论】：
面临同样的问题..找人回答！！！ 你找到答案了吗？？我被这个错误困了很长时间:( 【参考方案1】：在最新的 Angular cli 版本中使用 jspdf 非常简单。只需从 npm 安装 jspdf 并像这样使用它：
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');
对于基于 systemjs 而不是 webpack 的旧版本 angular cli
Here is a link 描述了一种使用angular-cli 和umd 或纯javascript 中的库的方法。它基本上涉及使用declare jsPDF: any 以及在 systemjs 供应商文件中导入库。
【讨论】：
仍然面临同样的错误！！！！如何在 Typescript 中使用该 jspdf？ 糟糕，angular-cli-build.js 中包含错误的供应商文件。试试上面更新的配置。
@Simon Bengtsson ，看这里我的问题是不同的:(我没有找到像 app.component.ts,src/system-config.ts,angular-cli-build.js 这样的文件我的申请。我必须先找出答案，以便我可以实施您在回答中提到的步骤。
这个答案主要针对使用angular-cli的人，但可以作为其他systemjs项目的灵感。如果您有其他设置，那么创建一个新问题可能会更容易，您可以在其中更详细地描述您的代码和构建配置。之后请随时 ping 我，我会看看。
@Simon Bengtsson，如果可能的话，帮我解决这个问题 -----> ***.com/questions/38661808/…【参考方案2】：
使用 Angular-cli 和 Angular 4 的方式是 首先将 jspdf 添加到 .angular-cli.json 中的 Scripts 数组中
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js"
]
然后在组件中添加以下内容
import * as JSPdf from 'jspdf';
然后在你的课堂上
generatePdf()
let doc = new JSPdf();
doc.text("Hello", 20, 20);
doc.save('table.pdf');
【讨论】：
如何在我的 ionic 项目中添加脚本？我已经使用 npm 安装了 jspdf，卡住了下一步该做什么 即使你已经使用 npm 安装了 jspdf，也会有类似以下目录结构 node_modules/jspdf/dist/jspdf.min.js 的文件，你应该在脚本列表下添加给定的行指定文件 .angular-cli.json 在我的例子中，node_modules 的相对路径从同一个目录开始，所以我使用了“./node_modules/jspdf/dist/jspdf.min.js”。无论如何，这是唯一对我有用的答案。以上是关于Typescript - 如何在 Angular2 中正确使用 jsPDF？的主要内容，如果未能解决你的问题，请参考以下文章
渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？
如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？
Angular2，TypeScript，如何读取/绑定属性值到组件类（在 ngOnInit 中未定义）[重复]