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

【问题标题】：Typescript - how to correctly use jsPDF in Angular2?Typescript - 如何在 Angular2 中正确使用 jsPDF？
【发布时间】：2023-09-20 14:21:01
【问题描述】：

我创建了一个生成 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 吗？

谢谢。

【问题讨论】：

面临同样的问题..找人回答！！！
你找到答案了吗？？我被这个错误困了很长时间:(

标签： json pdf typescript angular 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”。无论如何，这是唯一对我有用的答案。