Não consigo usar jsPDF com Angular 10

Question

Eu estava tentando imprimir minha página usando a jspdfbiblioteca. Eu tentei tantas soluções para fazer isso seguindo exemplos aqui e em quase todos os links de sugestão do Google, mas ainda não consegui consertar.

Aqui está o que tentei até agora:

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

Tentar importar jsPDFcomo o acima cria o seguinte erro durante a compilação

ERROR in src / ... component.ts: 42: 21 - erro TS2351: Esta expressão não pode ser construída. O tipo 'typeof import ("jspdf")' não tem assinaturas de construção.

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

Então, tentei importá-lo de outra maneira, conforme sugerido nesta resposta stackoverflow

declare var jsPDF: any;

E ainda assim, isso cria um erro de console dizendo que jsPDFnão está definido.

Então eu encontrei outra solução conforme postado aqui Tutorial de PDF do Angular 10/9/8 - Exportar PDF no Angular com JSPDF

E seguindo este método agora recebo o seguinte erro

ERROR TypeError: doc.fromHTML não é uma função openPDF Notice.component.ts: 43 ... Component_Template_button_click_2_listener ... component.html: 3 Angular 23

Não tenho ideia do que perdi aqui, já que essa biblioteca deveria funcionar em todas as versões Angular. Qualquer ajuda será apreciada.

Aqui eu criei um projeto Stackblitz

Answer 1

Depois de tentar tantas soluções diferentes para esse problema, descobri que tanto o addHTMLquanto fromHTMLestá depreciado nas versões mais recentes do jspdfe foram substituídos por apenas html. Para quem busca uma solução melhor para trabalhar jspdfe Angular 10aqui está o que parece funcionar e o melhor resultado que encontrei até agora.

Para importar jspdfversão (2.xx), simplesmente fazer: import { jsPDF } from 'jspdf';.

Você não precisará incluir nenhuma das dependências em angular.jsonscripts como faria nas versões anteriores. E se você adicionar scripts de jspdfou html2canvasdentro index.html, remova-os também. Ao executá- npm install jspdflo, também instala o, html2canvasque também é importado dinamicamente pelo 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");
     }
  });
}

Embora eu ainda use o doc.html()método, não usaria o cssestilo que usei para a minha página.

Answer 2

Depois de trabalhar com o OP por um curto período de tempo em um stackblitz, parece que o principal problema era que o uso da biblioteca mudou entre as versões 1.3.5 (aquela usada nos exemplos) para 2.1.0 (a que ele estava usando) . Estou adicionando esta resposta para que possa fornecer uma pista para futuros candidatos a soluções que sofrem de um problema semelhante.

Answer 3

Em vez da diretiva de importação que você está usando, tente

import jsPDF from 'jspdf';

Observe que se você estiver usando este método, você terá que excluir o

declare var jsPDF:any;