web-dev-qa-db-fra.com

Angular2 - Génère un pdf à partir de HTML en utilisant jspdf

Pour un projet sur lequel je travaille, je dois pouvoir générer un PDF de la page sur laquelle l'utilisateur se trouve actuellement, pour lequel je vais utiliser jspdf. Étant donné que j'ai une HTML, je dois générer un PDF avec, il me faut la fonction addHTML(). Il y a beaucoup de sujet à ce sujet, en disant

Vous devrez soit utiliser html2canvas ou rasterizehtml.

J'ai choisi d'utiliser html2canvas. Voici à quoi ressemble mon code:

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

Lorsque cette fonction est appelée, j'obtiens une erreur de console:

EXCEPTION: erreur dans la classe ./AppComponent AppComponent - modèle en ligne: 3: 4 provoqué par: Vous devez soit https://github.com/niklasvh/html2canvas ou https://github.com/cburgmer/ rasterizeHTML.js

Pourquoi est-ce exactement? Je donne un paramètre canvas et il indique toujours que je dois utiliser html2canvas.

angularpdftypescriptjspdfhtml2canvas
6
FlorisdG

Ce que j'ai trouvé fonctionnait, c'était d'ajouter:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

dans le fichier index.html (ce pourrait probablement être ailleurs).

J'ai ensuite utilisé:

const elementToPrint = document.getElementById('foo'); //The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
    doc.save('web.pdf');
});

Qui n'utilise plus html2canvas dans le code.
Vous pouvez ensuite supprimer l'importation suivante:

import * as html2canvas from 'html2canvas';
15
Greg

Si quelqu'un préfère ne pas utiliser les scripts cdn et utiliser une méthode plus (angulaire), cela a fonctionné pour moi dans Angular 6:

En utilisant cette méthode, vous obtiendrez un meilleur support et une saisie semi-automatique dans l'éditeur et vous éviterez de dépendre des scripts cdn (si vous voulez les éviter, comme moi)

Sur la base de excellente réponse ici & puisqu'il était difficile pour moi de trouver cette réponse, je partage à nouveau ce qui y est énoncé et m'a aidé à utiliser jsPDF dans Angular 6 (tout le mérite revient à l'auteur original de cette réponse)

Vous devriez lancer ces cmds:

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

Quiconque essaie toujours de convertir une div Html en un pdf peut choisir d’utiliser html2pdf , avec quelques lignes, vous pouvez tout faire avec facilité.

var element = document.getElementById('element-to-print');
html2pdf(element);
3
Sadiq Ali

Essayez comme ça: 

GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');    
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 10, 10, 580, 300);
        pdf.save('web.pdf');
      }
    });
  }
2
ferralucho