Typescript - 如何在Angular2中正确使用jsPDF？

Question

Typescript - 如何在Angular2中正确使用jsPDF？

8

我创建了一个Angular2应用程序，用于生成JSON数据。我希望将这个JSON输出保存在一个文件中，最好是PDF文件。这个应用程序是使用TypeScript编写的。

我使用了jsPDF将JSON数据写入PDF文件。我通过npm安装了jsPDF包，使用命令npm install jspdf --save。我还在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): error TS2304: Cannot find name '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？

谢谢。

- Sudha

面临同样的问题..正在寻找有人能够回答!!!! - Beckham_Vinoth

你找到答案了吗？我被这个错误卡了很久:( - Beckham_Vinoth

2个回答

4

使用Angular-cli和Angular 4的方法是，首先在.angular-cli.json文件中将jspdf添加到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');
}

- Dheeraj

我该如何在我的Ionic项目中添加脚本？我已经使用npm安装了jspdf，但不知道接下来该怎么做。 - user2828442

即使您已经使用npm安装了jspdf，也会有像下面这样的文件目录结构node_modules/jspdf/dist/jspdf.min.js，您应该将给定的行添加到指定文件.angular-cli.json的脚本列表中。 - Anil Agrawal

在我的情况下，相对路径到node_modules从同一目录开始，所以我使用了"./node_modules/jspdf/dist/jspdf.min.js"。无论如何，这是唯一对我有用的答案。 - Joe Aspara

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Bengtsson · Accepted Answer

使用最新版本的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

这里是一个链接，介绍了一种使用angular-cli和umd或普通javascript库的方法。它基本上涉及到在systemjs vendor文件中导入库，然后使用declare jsPDF: any。