it-swarm.com.de

Typoskript - wie man jsPDF in Angular2 richtig einsetzt

Ich habe eine Angular2-Anwendung erstellt, die JSON-Daten generiert. Ich möchte diese JSON-Ausgabe in einer Datei speichern, vorzugsweise in einer PDF -Datei. Diese Anwendung wurde mit TypeScript geschrieben.

Ich habe jsPDF zum Schreiben der JSON-Daten in eine Datei PDF verwendet. Ich habe das jsPDF-Paket über npm mit npm install jspdf --save installiert. Ich habe auch notwendige Links in der index.html-Seite hinzugefügt. Ich habe diese Änderungen an meiner Anwendung vorgenommen, als sie ausgeführt wurde. Ich konnte die JSON-Daten in der Datei speichern.

Wenn ich die Anwendung gestoppt und erneut gestartet habe, wurde sie nicht wie erwartet gestartet. Ich habe folgende Fehlermeldung erhalten:

[email protected] Starten Sie C:\Users *****\Documents\Projects\Angular\json-to-pdf

tsc && gleichzeitig "npm run tsc: w" "npm run lite"

app/components/app.component.ts (35,19): Fehler TS2304: Name 'jsPDF' kann nicht gefunden werden.

Ich füge den Code hinzu, den ich verwendet habe. 

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

Ich denke, einige Import-Anweisungen fehlen in der Datei app.component.ts. Kann jemand auf die richtige Import-Anweisung verweisen, wenn diese fehlt? Wenn dies der Fehler ist, den ich gemacht habe, kann ich wissen, wie man jsPDF in Angular2 richtig verwendet?

Vielen Dank.

8

Die Verwendung von jspdf mit der neuesten Version von eckig cli ist sehr einfach. Installieren Sie einfach jspdf von npm und verwenden Sie es wie folgt:

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

Für ältere Versionen von angle cli, die auf systemjs statt auf webpack basieren

Hier ist ein Link zu einer Beschreibung einer Möglichkeit, mit dem angular-cli und den Bibliotheken in umd oder einfachem Javascript zu arbeiten. Grundsätzlich müssen Sie declare jsPDF: any zusammen mit dem Importieren der Bibliothek in systemjs-Anbieterdateien verwenden.

7
Simon Bengtsson

Wenn Sie Angular-cli und Angular 4 verwenden, gehen Sie folgendermaßen vor: Fügen Sie jspdf zunächst dem Scripts-Array in .angular-cli.json hinzu 

"scripts": [
        "../node_modules/jspdf/dist/jspdf.min.js"
      ]

dann fügen Sie in der Komponente Folgendes hinzu 

import * as JSPdf from 'jspdf'; 

dann in deiner Klasse

  generatePdf() {
    let doc = new JSPdf();
    doc.text("Hello", 20, 20);
    doc.save('table.pdf');
}
3
Dheeraj