web-dev-qa-db-fra.com

Typescript - comment utiliser correctement jsPDF dans Angular2?

J'ai créé une application Angular2 qui génère des données JSON. Je souhaite enregistrer cette sortie JSON dans un fichier, de préférence un fichier PDF. Cette application est écrite en utilisant TypeScript.

J'ai utilisé jsPDF pour écrire les données JSON dans un fichier PDF. J'ai installé le paquet jsPDF via npm en utilisant npm install jspdf --save. J'ai également ajouté les liens nécessaires dans la page index.html. J'ai apporté ces modifications à mon application lorsqu'elle fonctionnait. J'ai pu enregistrer les données JSON dans le fichier.

Lorsque j'ai arrêté et redémarré l'application, celle-ci n'a pas démarré comme prévu. J'ai eu l'erreur suivante:

[email protected] démarrer C:\Utilisateurs *****\Documents\Projets\Angular\json-to-pdf

tsc && simultanément "npm run tsc: w" "npm run lite"

app/components/app.component.ts (35,19): erreur TS2304: impossible de trouver le nom 'jsPDF'.

J'ajoute le code que j'ai utilisé. 

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

Je pense qu'une déclaration d'importation manque dans le fichier app.component.ts. Quelqu'un peut-il indiquer la déclaration d'importation correcte si c'est ce qui manque? Si telle est l'erreur que j'ai commise, puis-je savoir comment nous correctement jsPDF dans Angular2?

Je vous remercie.

jsonpdftypescriptangularjspdf
8
Sudhashri S Hebbar

Utiliser jspdf avec la dernière version de Cli angulaire est vraiment facile. Installez simplement jspdf à partir de npm et utilisez-le à peu près comme ceci:

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

Pour les anciennes versions de clular angular basé sur systemjs au lieu de webpack}

Voici un lien vers une description d’une façon de travailler avec angular-cli et les bibliothèques dans umd ou javascript simple. Cela implique essentiellement d’utiliser declare jsPDF: any avec l’importation de la bibliothèque dans les fichiers fournisseur de systemj.

7
Simon Bengtsson

La façon dont vous utiliseriez Angular-cli et Angular 4 est Commencez par ajouter jspdf au tableau Scripts dans .angular-cli.json 

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

puis dans le composant ajouter ce qui suit 

import * as JSPdf from 'jspdf';

alors dans ta classe

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