No puedo usar jsPDF con Angular 10

Question

Estaba intentando imprimir mi página usando la jspdfbiblioteca. Probé tantas soluciones para hacerlo siguiendo los ejemplos aquí y casi todos los enlaces de sugerencias de Google, pero aún así no pude solucionarlo.

Esto es lo que he probado hasta ahora:

import * as jsPDF from 'jspdf';
.....
openPDF(): void {
    const DATA = this.couponPage.nativeElement;
    const doc = new jsPDF('p', 'pt', 'a4');
    doc.fromHTML(DATA.innerHTML, 15, 15);
    doc.output('dataurlnewwindow');
}

Intentar importar jsPDFcomo el anterior crea el siguiente error al compilar

ERROR en src / ... component.ts: 42: 21 - error TS2351: esta expresión no se puede construir. El tipo 'typeof import ("jspdf")' no tiene firmas de construcción.

42     const doc = new jsPDF('p', 'pt', 'a4');

Entonces, intenté importarlo de otra manera como se sugiere en esta respuesta de stackoverflow

declare var jsPDF: any;

Y, sin embargo, esto crea un error de consola que dice que jsPDFno está definido.

Luego encontré otra solución como se publicó aquí Tutorial en PDF de Angular 10/9/8 - Exportar PDF en Angular con JSPDF

Y siguiendo este método ahora recibí el siguiente error

ERROR TypeError: doc.fromHTML no es una función openPDF notice.component.ts: 43 ... Component_Template_button_click_2_listener ... component.html: 3 Angular 23

No tengo idea de lo que me he perdido aquí, ya que se supone que esta biblioteca funciona en todas las versiones de Angular. Se agradecerá cualquier ayuda.

Aquí he creado un proyecto Stackblitz

Answer 1

Después de probar tantas soluciones diferentes para este problema, descubrí que tanto addHTMLy fromHTMLse deprecian en las últimas versiones de jspdfy se reemplazan con solo html. Para aquellos que buscan una mejor solución para trabajar jspdfy Angular 10esto es lo que parece funcionar y un mejor resultado que he encontrado hasta ahora.

Para importar jspdfla versión (2.xx), simplemente hacer: import { jsPDF } from 'jspdf';.

No necesitará incluir ninguna de las dependencias en los angular.jsonscripts como lo haría en versiones anteriores. Y si agrega scripts de jspdfo html2canvasdentro index.html, también elimínelos. Al ejecutarlo npm install jspdf, también instala el html2canvasque también es importado dinámicamente por jspdf.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { jsPDF } from 'jspdf';

.....

 @ViewChild('couponPage', { static: true }) couponPage: ElementRef;

.......

openPDF(): void {
  const DATA = this.couponPage.nativeElement;
  const doc: jsPDF = new jsPDF("p", "mm", "a4");
  doc.html(DATA, {
     callback: (doc) => {
       doc.output("dataurlnewwindow");
     }
  });
}

Aunque para mí todavía estoy usando el doc.html()método, no usaría el cssestilo que usé para mi página.

Answer 2

Después de trabajar con el OP por un corto tiempo en un stackblitz, parece que el principal problema fue que el uso de la biblioteca cambió entre las versiones 1.3.5 (la que se usa en los ejemplos) a 2.1.0 (la que estaba usando) . Estoy agregando esta respuesta para que pueda proporcionar una pista para los futuros buscadores de soluciones que sufran un problema similar.

Answer 3

En lugar de la directiva de importación que está utilizando, intente

import jsPDF from 'jspdf';

Tenga en cuenta que si está utilizando este método, deberá eliminar el

declare var jsPDF:any;