Angular- jsPDF uyarıları, beklenmeyen tocken ve jsPDF.fromHTML bir işlev değildir

Question

JsPDF ile Angular'da html kodu yazdırmak istiyorum ama yapamıyorum. yardıma ihtiyacım var bak

ts.config.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "allowSyntheticDefaultImports": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

npm jspdf modülü

görüntü açıklamasını buraya girin

angular.json komut dosyaları

 "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/jspdf/dist/jspdf.es.min.js"
            ]

Sınıfta böyle import jsPDF from 'jspdf';veya böyle içe aktarırsam import { jsPDF } from "jspdf";bu uyarıyı ve bu hatayı alıyorum.

uyarı:

WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:141-151
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:240-254
Critical dependency: the request of a dependency is an expression

hata:

scripts.js:18390 Uncaught SyntaxError: Unexpected token 'export'

jspdf'i böyle içe aktarırsam import * as jsPDF from "jspdf";şu hatayı alırım:

hata:

Type 'typeof import("jspdf")' has no construct signatures.
    const doc = new jsPDF('p', 'pt', 'letter');

bu benim sınıfım:

//PDF
// import { jsPDF } from "jspdf";
import jsPDF from 'jspdf';
// import * as jsPDF from "jspdf";

@Component({
  selector: 'app-cash-register',
  templateUrl: './cash-register.component.html'
})
export class CashRegisterComponent implements OnInit {

@ViewChild("ticket") ticket: ElementRef;

public printPDF(): void {
    var pdf = this.ticket.nativeElement.innerHTML;
    const doc = new jsPDF('p', 'pt', 'letter');

    const margins = {
      top: 80,
      bottom: 60,
      left: 40,
      width: 522
    };

    doc.html(pdf, {
      callback: function(doc) {
        doc.save("Test1.pdf");
      }
    })

    // or
    
    doc.fromHTML(pdf, margins.left, margins.top, {}, function () {

      doc.save("Test2.pdf");
    }, margins);
  }
}

ve jspdf'i angular.json içinde içe aktarmazsam, indirmeyi denediğimde şu hatayı alıyorum:

core.js:4197 ERROR TypeError: doc.fromHTML is not a function

Answer 1

İyi bir çözümüm yok ama bu şekilde çalıştırdım. Görünüşe göre jspdf 2.0.0 "doc.fromHTML bir işlev değildir" atıyor. açısal 10'da (önceki açısal sürümlerde çalışıp çalışmadığından emin değilim.)

Jsdpf 2.0.0'ı kullanarak kaldırdım

npm uninstall jspdf

Sonra önceki sürümü yükledim:

npm install [email protected]

Çalışma Örneği:

import * as jsPDF from 'jspdf';


var doc = new jsPDF('p', 'pt', 'letter');
var imgData =
  'data:image/png;base64,addAnImageData';
var specialElementHandlers = {
  '#idDiv': function (element, renderer) {
    return true;
  }
};
doc.addImage(imgData, 'png', 0, 250, 615, 200);
let source = document.getElementById("idDiv");
doc.fromHTML(source, 0, 0, {
  'elementHandlers': specialElementHandlers
});
doc.save('card.pdf');

Answer 2

doc.fromHTML()Sorun çok Açısal 7.x meydana geldi. JsPDF 1.5.3'e düşürürseniz, düzgün çalışabilir.