关于json:Typescript-如何在Angular2中正确使用jsPDF?

Typescript - how to correctly use jsPDF in Angular2?

我已经创建了一个生成JSON数据的Angular2应用程序。我想将此JSON输出保存到文件(最好是PDF文件)中。此应用程序是使用Typescript编写的。

我已经使用jsPDF将JSON数据写入PDF文件。我已经使用npm install jspdf --save通过npm安装了jsPDF软件包。我还在index.html页面中添加了必要的链接。我在应用程序运行时对它们进行了更改。我能够将JSON数据保存到文件中。

当我停止并重新启动该应用程序时,它没有按预期启动。我收到以下错误:

[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-cliumd或普通javascript中的库的一种使用方式的描述的链接。它基本上涉及使用declare jsPDF: any并将库导入到systemjs供应商文件中。


使用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');
}