Angular-jsPDF-Warnungen, unerwartetes tocken und jsPDF.fromHTML sind keine Funktion

Aug 16 2020

Ich möchte HTML-Code mit jsPDF in Angular drucken, aber ich kann nicht. Ich brauche Hilfe, schau.

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 Modul

Geben Sie hier die Bildbeschreibung ein

angle.json-Skripte

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

Wenn ich in der Klasse so import jsPDF from 'jspdf';oder so importiere, import { jsPDF } from "jspdf";bekomme ich diese Warnung und diesen Fehler.

Warnung:

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

Error:

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

Wenn ich jspdf so importiere, bekomme import * as jsPDF from "jspdf";ich diesen Fehler:

Error:

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

das ist meine Klasse:

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

und wenn ich jspdf nicht in angle.json importiere, erhalte ich diesen Fehler, als ich versuchte herunterzuladen:

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

Antworten

5 Nakres Aug 18 2020 at 05:16

Ich habe keine gute Lösung, aber so habe ich es geschafft. Es sieht so aus, als würde jspdf 2.0.0 "doc.fromHTML ist keine Funktion" auslösen. in Winkel 10 (Ich bin nicht sicher, ob es in den vorherigen Winkelversionen funktioniert.)

Ich habe jsdpf 2.0.0 mit entfernt

npm uninstall jspdf

Dann habe ich die vorherige Version installiert, die ist:

npm install [email protected]

Arbeitsbeispiel:

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

Das doc.fromHTML()Problem trat auch bei Angular 7.x auf. Wenn ein Downgrade auf jsPDF 1.5.3 durchgeführt wird, kann es ordnungsgemäß funktionieren.