Para un proyecto en el que estoy trabajando, necesito poder generar un PDF de la página en la que se encuentra actualmente el usuario, para lo cual jspdf . Como tengo un HTML con el que necesito generar un PDF, necesitaré la función addHTML() . Hay muchos temas sobre esto, diciendo
Deberá usar
html2canvasorasterizehtml.
Elegí usar html2canvas . Así es como se ve mi código en este momento:
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'); }); } }); } }Cuando se llama a esta función, aparece un error de consola:
EXCEPCIÓN: Error en ./AppComponent clase AppComponent - plantilla en línea: 3:4 causado por: Necesita https://github.com/niklasvh/html2canvas o https://github.com/cburgmer/rasterizeHTML.js
¿Por qué exactamente es esto? Doy un canvas como parámetro y todavía dice que necesito usar html2canvas .
Lo que encontré funcionó fue agregar:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>al archivo index.html (presumiblemente podría estar en otro lugar).
Luego usé:
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'); }); Que ya no usa html2canvas en el código.
A continuación, puede eliminar la siguiente importación:
import * as html2canvas from 'html2canvas';En caso de que alguien prefiera no usar scripts cdn y le gustaría usar una forma más (angular), esto funcionó para mí en Angular 6:
El uso de esta manera le brindará un mejor soporte y autocompletar en el editor y lo ayudará a evitar depender de los scripts de cdn (si quiere evitarlos, como yo)
Basado en la excelente respuesta aquí y dado que fue difícil para mí encontrar esa respuesta, estoy volviendo a compartir lo que se indicó en él y me ayudó a usar jsPDF en Angular 6 (todo el crédito es para el autor original de esta respuesta)
Debes ejecutar estos cmds:
npm install jspdf --save typings install dt~jspdf --global --save npm install @types/jspdf --saveAgregue lo siguiente en angular-cli.json:
"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]html:
<button (click)="download()">download </button>componente 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'); } }