Je ne peux pas utiliser jsPDF avec Angular 10

Question

J'essayais d'imprimer ma page en utilisant la jspdfbibliothèque. J'ai essayé tellement de solutions pour le faire en suivant les exemples ici et presque tous les liens de suggestion Google, mais je ne pouvais toujours pas le résoudre.

Voici ce que j'ai essayé jusqu'à présent:

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

Essayer d'importer jsPDFcomme ci-dessus crée l'erreur suivante lors de la compilation

ERREUR dans src / ... component.ts: 42: 21 - erreur TS2351: Cette expression n'est pas constructible. Le type 'typeof import ("jspdf")' n'a pas de signatures de construction.

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

Donc, j'ai essayé de l'importer d'une autre manière comme suggéré dans cette réponse stackoverflow

declare var jsPDF: any;

Et pourtant, cela crée une erreur de console disant que ce jsPDFn'est pas défini.

Ensuite, j'ai trouvé une autre solution comme publiée ici Tutoriel PDF Angular 10/9/8 - Exporter un PDF en Angular avec JSPDF

Et en suivant cette méthode maintenant, j'ai l'erreur suivante

ERREUR TypeError: doc.fromHTML n'est pas une fonction openPDF notice.component.ts: 43 ... Component_Template_button_click_2_listener ... component.html: 3 Angular 23

Je n'ai aucune idée de ce que j'ai manqué ici car cette bibliothèque est censée fonctionner dans toutes les versions Angular. Toute aide serait appréciée.

Ici, j'ai créé un projet Stackblitz

Answer 1

Après avoir essayé tant de solutions différentes pour ce problème, j'ai constaté que le addHTMLet fromHTMLétait déprécié dans les dernières versions de jspdfet qu'ils étaient remplacés par juste html. Pour ceux qui recherchent une meilleure solution avec laquelle travailler jspdfet Angular 10voici ce qui semble fonctionner et un meilleur résultat que j'ai trouvé jusqu'à présent.

Pour importer la jspdfversion (2.xx), tout simplement: import { jsPDF } from 'jspdf';.

Vous n'aurez pas besoin d'inclure l'une des dépendances dans les angular.jsonscripts comme vous le feriez dans les versions précédentes. Et si vous ajoutez des scripts de jspdfou à l' html2canvasintérieur index.html, supprimez-les également. En l'exécutant npm install jspdf, installez également le html2canvasqui est également importé dynamiquement par 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");
     }
  });
}

Bien que pour moi doc.html()j'utilise toujours la méthode, cela n'utiliserait pas le cssstyle que j'ai utilisé pour ma page.

Answer 2

Après avoir travaillé avec l'OP pendant une courte période sur un stackblitz, il semble que le principal problème soit que l'utilisation de la bibliothèque ait changé entre les versions 1.3.5 (celle utilisée dans les exemples) à 2.1.0 (celle qu'il utilisait) . J'ajoute cette réponse afin qu'elle puisse fournir un indice aux futurs chercheurs de solutions qui souffrent d'un problème similaire.

Answer 3

Au lieu de la directive d'importation que vous utilisez, essayez

import jsPDF from 'jspdf';

Notez que si vous utilisez cette méthode, vous devrez supprimer le

declare var jsPDF:any;