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