web-dev-qa-db-fra.com

Comment utiliser jsPDF avec Angular 2

J'ai une erreur: jsPDF n'est pas défini, j'utilise actuellement le code suivant: 

import { Component, OnInit, Inject } from '@angular/core';
import 'jspdf';
declare let jsPDF;
@Component({
  ....
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');    
        doc.save('Test.pdf');
    }
}

J'ai installé npm de jsPDF mais je ne sais pas comment importer jspdf et exécuter avec angular-cli: 1.0.0-beta.17

angularjspdfangular2-cli
16
GsMalhotra

Je l'ai fait, après avoir fait beaucoup de R & D, il ne reste que quelques étapes à suivre: Install:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

_ {Ajouter la suite dans angular-cli.json:} _

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

html:

<button (click)="download()">download </button>

composant ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}
63
GsMalhotra

J'ai créé une démo jsPdf basée sur cette réponse avec l'aide de @gsmalhotra

Première installation

npm install jspdf --save

J'ai utilisé un tableau d'images, convertissant d'abord l'image en base64 (jsPDF n'autorise pas les URL d'image)

getBase64Image(img) {
  var canvas = document.createElement("canvas");
  console.log("image");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/jpeg");
  return dataURL;
}

Puis, dans une boucle, j'ai appelé la fonction ci-dessus qui renvoie une image base64, puis j'ai ajouté une image à PDF à l'aide de doc.addImage().

for(var i=0;i<this.images.length;i++){
   let imageData= this.getBase64Image(document.getElementById('img'+i));
   doc.addImage(imageData, "JPG", 10, (i+1)*10, 180, 150);
   doc.addPage();
}

Code HTML

<div class="col-md-4" *ngFor="let img of images;let i=index">
    <img id="img{{i}}" class="img-fluid" crossOrigin="Anonymous" [src]="img.url">
</div>

Démo
Code

6
Gaurav Umrani

Vieille question, mais c’est une solution alternative que je me suis lancée dans mon application angulaire. J'ai fini par modifier cette solution jsPDF pour travailler sans utiliser le CLI ionic/cordova.

npm install jspdf --save
npm install @types/jspdf --save
npm install html2canvas --save
npm install @types/html2canvas --save

Ajouter un identifiant à n'importe quel div contenant le contenu que vous voulez générer le PDF

<div id="html2Pdf">your content here</div>

Importer les bibliothèques

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

Ajouter la méthode pour générer le PDF

generatePdf() {
    const div = document.getElementById("html2Pdf");
    const options = {background: "white", height: div.clientHeight, width: div.clientWidth};

    html2canvas(div, options).then((canvas) => {
        //Initialize JSPDF
        let doc = new jsPDF("p", "mm", "a4");
        //Converting canvas to Image
        let imgData = canvas.toDataURL("image/PNG");
        //Add image Canvas to PDF
        doc.addImage(imgData, 'PNG', 20, 20);

        let pdfOutput = doc.output();
        // using ArrayBuffer will allow you to put image inside PDF
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (let i = 0; i < pdfOutput.length; i++) {
            array[i] = pdfOutput.charCodeAt(i);
        }

        //Name of pdf
        const fileName = "example.pdf";

        // Make file
        doc.save(fileName);

    });
}

J'ai trouvé que cette solution fonctionnait bien pour mon application Web et que je pouvais contrôler le moment où je souhaitais générer le fichier PDF (après avoir reçu des données de manière asynchrone). De plus, je n'avais besoin d'installer aucune bibliothèque à l'échelle mondiale.

1
spencer