Angular- peringatan jsPDF, tocken yang tidak diharapkan dan jsPDF.fromHTML bukan merupakan fungsi

Aug 16 2020

Saya ingin mencetak kode html sedikit pun jsPDF di Angular tetapi saya tidak bisa. saya butuh bantuan, lihat.

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"
  ]
}

modul npm jspdf

masukkan deskripsi gambar di sini

skrip angular.json

 "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"
            ]

jika di kelas saya impor seperti ini import jsPDF from 'jspdf';atau seperti ini import { jsPDF } from "jspdf";saya mendapatkan peringatan ini dan kesalahan ini.

peringatan:

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

kesalahan:

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

jika saya mengimpor jspdf seperti ini import * as jsPDF from "jspdf";saya mendapatkan kesalahan ini:

kesalahan:

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

ini kelasku:

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

dan jika saya tidak mengimpor jspdf di angular.json saya mendapatkan kesalahan ini ketika saya mencoba mengunduh:

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

Jawaban

5 Nakres Aug 18 2020 at 05:16

Saya tidak memiliki solusi yang baik, tetapi inilah cara saya membuatnya berhasil. Sepertinya jspdf 2.0.0 menampilkan "doc.fromHTML bukan sebuah fungsi." di sudut 10 (Saya tidak yakin apakah ini berfungsi di versi sudut sebelumnya.)

Saya menghapus jsdpf 2.0.0 menggunakan

npm uninstall jspdf

Kemudian saya install versi sebelumnya yaitu:

npm install [email protected]

Bekerja Contoh:

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');
hyzhang6639 Aug 23 2020 at 19:54

The doc.fromHTML()masalah terjadi pada 7.x sudut juga. Jika downgrade ke jsPDF 1.5.3, itu dapat bekerja dengan baik.