Angular 10 ile jsPDF kullanamıyorum

Question

Sayfamı jspdfkitaplığı kullanarak yazdırmaya çalışıyordum . Buradaki örnekleri ve hemen hemen her Google öneri bağlantısını halletmek için pek çok çözüm denedim, ancak yine de düzeltemedim.

İşte şimdiye kadar denediğim şey:

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

jsPDFYukarıdaki gibi içe aktarmaya çalışmak , derleme sırasında aşağıdaki hatayı oluşturur

Src / ... component.ts içindeki HATA: 42: 21 - hata TS2351: Bu ifade oluşturulamaz. 'Typeof import ("jspdf")' türünün hiçbir yapı imzası yoktur.

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

Bu yüzden, bu stackoverflow yanıtında önerildiği gibi başka bir şekilde içe aktarmayı denedim

declare var jsPDF: any;

Yine de bu, jsPDFtanımlanmadığını söyleyen bir konsol hatası yaratır .

Sonra burada yayınlanan başka bir çözüm buldum Angular 10/9/8 PDF Eğitimi - PDF'yi JSPDF ile Angular'da Dışa Aktar

Ve bu yöntemi takiben şimdi aşağıdaki hatayı aldım

HATA TypeError: doc.fromHTML bir işlev değildir openPDF notice.component.ts: 43 ... Component_Template_button_click_2_listener ... component.html: 3 Angular 23

Bu kitaplığın tüm Angular sürümlerinde çalışması gerektiği için burada neyi özlediğime dair hiçbir fikrim yok. Herhangi bir yardım takdir edilecektir.

Burada bir Stackblitz projesi oluşturdum

Answer 1

Bu sorunla ilgili çok farklı çözümler denedikten sonra şimdi buldum hem addHTMLve fromHTMLen son sürümlerinde amorti edilir jspdfve onlar sadece değiştirilir html. İle çalışmak için daha iyi bir çözüm arıyorlar olanlar için jspdfve Angular 10burada çalışan görünüyor ve şu ana kadar buldum daha iyi bir sonuç budur.

İthalat için jspdfsürümü (2.xx), sadece basitçe yapın: import { jsPDF } from 'jspdf';.

angular.jsonÖnceki sürümlerde yaptığınız gibi bağımlılıkların hiçbirini komut dosyalarına eklemenize gerek yoktur. Ve içine jspdfveya html2canvasiçine komut dosyaları eklerseniz index.html, bunları da kaldırın. Çalıştırarak ayrıca dinamik olarak içe aktarılmış olanı npm install jspdfda yükleyin .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");
     }
  });
}

Benim için hala doc.html()yöntemi kullansam da, csssayfam için kullandığım stili kullanmazdı .

Answer 2

Bir stackblitz üzerinde OP ile kısa bir süre çalıştıktan sonra, ana sorun, kütüphanenin kullanımının sürüm 1.3.5 (örneklerde kullanılan) arasında 2.1.0'a (kullandığı sürüm) değişmesiydi. . Bu yanıtı, benzer bir sorundan muzdarip gelecekteki çözüm arayanlara bir ipucu sağlamak için ekliyorum.

Answer 3

Kullandığınız ithalat yönergesi yerine deneyin

import jsPDF from 'jspdf';

Bu yöntemi kullanıyorsanız, silmeniz gerekeceğini unutmayın.

declare var jsPDF:any;