Non riesco a usare jsPDF con Angular 10

Question

Stavo cercando di stampare la mia pagina usando la jspdflibreria. Ho provato così tante soluzioni per farlo seguendo gli esempi qui e quasi tutti i link di suggerimento di Google, ma non sono ancora riuscito a risolverlo.

Ecco cosa ho provato finora:

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

Il tentativo di importazione jsPDFcome sopra crea il seguente errore durante la compilazione

ERRORE in src / ... component.ts: 42: 21 - errore TS2351: questa espressione non è costruibile. Il tipo "typeof import (" jspdf ")" non ha firme di costrutto.

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

Quindi, ho provato a importarlo in un altro modo, come suggerito in questa risposta di stackoverflow

declare var jsPDF: any;

Eppure questo crea un errore di console che dice che jsPDFnon è definito.

Quindi ho trovato un'altra soluzione come pubblicata qui Angular 10/9/8 PDF Tutorial - Esporta PDF in Angular con JSPDF

E seguendo questo metodo ora ho ricevuto il seguente errore

ERRORE TypeError: doc.fromHTML non è una funzione openPDF notice.component.ts: 43 ... Component_Template_button_click_2_listener ... component.html: 3 Angular 23

Non ho idea di cosa mi sia perso qui dato che questa libreria dovrebbe funzionare in tutte le versioni angolari. Qualsiasi aiuto sarà apprezzato.

Qui ho creato un progetto Stackblitz

Answer 1

Dopo aver provato così tante soluzioni diverse per questo problema ora ho scoperto che sia il addHTMLche fromHTMLè deprezzato nelle ultime versioni di jspdfe vengono sostituiti con solo html. Per coloro che sono alla ricerca di una soluzione migliore con cui lavorare jspdfed Angular 10ecco cosa sembra funzionare e un risultato migliore che ho trovato finora.

Per l'importazione jspdfdi versione (2.xx), basta semplicemente fare: import { jsPDF } from 'jspdf';.

Non avrai bisogno di includere nessuna delle dipendenze negli angular.jsonscript come faresti nelle versioni precedenti. E se aggiungi script di jspdfo html2canvasall'interno index.html, rimuovili anche. Eseguendolo npm install jspdfsi installa anche il file html2canvasche viene importato dinamicamente da 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");
     }
  });
}

Sebbene per me continui a usare il doc.html()metodo, non userebbe lo cssstile che ho usato per la mia pagina.

Answer 2

Dopo aver lavorato con l'OP per un breve periodo su uno stackblitz, sembra che il problema principale sia stato che l'uso della libreria è cambiato tra le versioni 1.3.5 (quella usata negli esempi) alla 2.1.0 (quella che stava usando) . Aggiungo questa risposta in modo che possa fornire un indizio ai futuri cercatori di soluzioni che soffrono di un problema simile.

Answer 3

Invece della direttiva import che stai usando, prova

import jsPDF from 'jspdf';

Nota che se stai usando questo metodo, dovrai eliminare il file

declare var jsPDF:any;