Angular - avertissements jsPDF, jeton inattendu et jsPDF.fromHTML n'est pas une fonction

Question

Je veux imprimer le code html avec jsPDF en angulaire mais je ne peux pas. j'ai besoin d'aide, regarde.

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

module npm jspdf

entrez la description de l'image ici

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

si dans la classe j'importe comme ceci import jsPDF from 'jspdf';ou comme ceci, import { jsPDF } from "jspdf";j'obtiens cet avertissement et cette erreur.

Attention:

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

Erreur:

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

si j'import jspdf comme ceci, import * as jsPDF from "jspdf";j'obtiens cette erreur:

Erreur:

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

c'est ma classe:

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

et si je n'importe pas jspdf dans angular.json, j'obtiens cette erreur lorsque j'essaye de télécharger:

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

Answer 1

Je n'ai pas de bonne solution mais c'est ainsi que je l'ai fait fonctionner. Il semble que jspdf 2.0.0 lance "doc.fromHTML n'est pas une fonction." en angulaire 10 (je ne sais pas si cela fonctionne dans les versions angulaires précédentes.)

J'ai supprimé jsdpf 2.0.0 en utilisant

npm uninstall jspdf

Ensuite, j'ai installé la version précédente qui est:

npm install [email protected]

Exemple de travail:

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

Le doc.fromHTML()problème s'est produit également sur Angular 7.x. Si vous passez à jsPDF 1.5.3, cela peut fonctionner correctement.