ฉันไม่สามารถใช้ jsPDF กับ Angular 10 ได้

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 Tutorial - ส่งออก PDF ใน Angular ด้วย JSPDF

และทำตามวิธีนี้ตอนนี้ฉันได้รับข้อผิดพลาดต่อไปนี้

ข้อผิดพลาด TypeError: 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ก็ยังติดตั้งซึ่งจะถูกนำเข้าแบบไดนามิกโดยhtml2canvasjspdf

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

หลังจากทำงานกับ OP ในระยะเวลาสั้น ๆ บน stackblitz ดูเหมือนว่าปัญหาหลักคือการใช้ไลบรารีเปลี่ยนไประหว่างเวอร์ชัน 1.3.5 (เวอร์ชันที่ใช้ในตัวอย่าง) เป็น 2.1.0 (เวอร์ชันที่เขาใช้) . ฉันกำลังเพิ่มคำตอบนี้เพื่อให้เป็นเบาะแสสำหรับผู้ค้นหาวิธีแก้ปัญหาในอนาคตที่ประสบปัญหาคล้ายกัน

Answer 3

แทนที่จะใช้คำสั่งนำเข้าที่คุณใช้อยู่ให้ลอง

import jsPDF from 'jspdf';

โปรดทราบว่าหากคุณใช้วิธีนี้คุณจะต้องลบไฟล์

declare var jsPDF:any;