web-dev-qa-db-ja.com

Typescript-Angular2でjsPDFを正しく使用する方法は？

JSONデータを生成するAngular2アプリケーションを作成しました。このJSON出力をファイル、できればPDFファイルに保存します。このアプリケーションはTypeScriptを使用して作成されています。

JSONデータをPDFファイルに書き込むためにjsPDFを使用しました。npm install jspdf --saveを使用してnpm経由でjsPDFパッケージをインストールしました。index.htmlページに必要なリンクも追加しました。私はアプリケーションの実行中にこれらの変更を行い、JSONデータをファイルに保存することができました。

アプリケーションを停止して再起動すると、期待どおりに起動しませんでした。次のエラーが発生しました：

[email protected] start 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」が見つかりません。

使用したコードを追加します。

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を正しく使用する方法を知ることができますか？

ありがとうございました。

jsonpdftypescriptangularjspdf
8
Sudhashri S Hebbar

Jspdfを最新のangular cliバージョンで使用するのは非常に簡単です。単に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');
  }
}

angularの古いバージョンの場合、webpackの代わりにsystemjsに基づくCLI

リンクはこちらangular-cliおよびumdのライブラリまたはプレーンJavaScriptを使用する1つの方法の説明へ。基本的には、declare jsPDF: anyを使用して、ライブラリをsystemjsベンダーファイルにインポートします。

8
Simon Bengtsson

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');
}
4
Dheeraj