Angular 10에서 jsPDF를 사용할 수 없습니다.

Question

jspdf라이브러리를 사용하여 페이지를 인쇄하려고했습니다 . 여기에있는 예제와 거의 모든 Google 제안 링크에 따라 수행하기 위해 너무 많은 솔루션을 시도했지만 여전히 고칠 수 없었습니다.

지금까지 시도한 내용은 다음과 같습니다.

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

jsPDF위와 같이 가져 오려고 하면 컴파일하는 동안 다음과 같은 오류가 발생합니다.

src / ... component.ts : 42 : 21 오류-오류 TS2351 :이 표현식은 구성 할 수 없습니다. 'typeof import ( "jspdf")'유형에는 구성 서명이 없습니다.

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

그래서이 stackoverflow 답변 에서 제안한대로 다른 방법으로 가져 오려고했습니다.

declare var jsPDF: any;

그러나 이것은 jsPDF정의되지 않았다는 콘솔 오류를 생성합니다 .

그런 다음 여기에 게시 된 다른 솔루션을 찾았습니다. Angular 10/9/8 PDF 자습서 – JSPDF를 사용하여 Angular로 PDF 내보내기

그리고이 방법을 따르면 이제 다음과 같은 오류가 발생합니다.

오류 유형 오류 : doc.fromHTML은 함수가 아닙니다. openPDF notice.component.ts : 43 ... Component_Template_button_click_2_listener ... component.html : 3 Angular 23

이 라이브러리가 모든 Angular 버전에서 작동해야하므로 여기서 놓친 것이 무엇인지 전혀 모릅니다. 어떤 도움을 주시면 감사하겠습니다.

여기에 Stackblitz 프로젝트를 만들었습니다.

Answer 1

이 문제에 대한 너무 많은 다른 솔루션을 시도 후 지금은 발견 한 것을 모두 addHTML와 fromHTML의 최신 버전에서 감가 상각 jspdf및 그들은 단지로 대체됩니다 html. 와 작업에 더 나은 솔루션을 추구하는 사람들을 위해 jspdf그리고 Angular 10여기서 일하는 모습과 내가 지금까지 발견 한 것이 더 나은 결과 것입니다.

jspdf버전 (2.xx) 을 가져 오려면 다음을 수행하십시오 import { jsPDF } from 'jspdf';..

angular.json이전 버전에서와 같이 스크립트에 종속성을 포함 할 필요가 없습니다 . jspdf또는 의 또는 html2canvas내부 에 스크립트를 추가하는 경우 index.html에도 제거하십시오. 실행 npm install jspdf하면에서 html2canvas동적으로 가져 오는 도 설치 됩니다 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");
     }
  });
}

나에게는 여전히 doc.html()방법을 css사용하지만 내 페이지에 사용한 스타일을 사용하지 않습니다 .

Answer 2

stackblitz에서 잠시 OP로 작업 한 후, 라이브러리 사용이 버전 1.3.5 (예제에서 사용 된 버전)에서 2.1.0 (그가 사용중인 버전)으로 변경된 것이 주요 문제인 것 같습니다. . 비슷한 문제로 고통받는 미래의 솔루션 구직자에게 단서를 제공 할 수 있도록이 답변을 추가하고 있습니다.

Answer 3

사용중인 가져 오기 지시문 대신

import jsPDF from 'jspdf';

이 방법을 사용하는 경우

declare var jsPDF:any;