Angular- advertencias jsPDF, tocken inesperado y jsPDF.fromHTML no es una función

Question

Quiero imprimir código html con jsPDF en Angular pero no puedo. necesito ayuda, mira.

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

módulo npm jspdf

ingrese la descripción de la imagen aquí

scripts de 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 en la clase que importo así import jsPDF from 'jspdf';o así, import { jsPDF } from "jspdf";aparece esta advertencia y este error.

advertencia:

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'

si importo jspdf como este, import * as jsPDF from "jspdf";obtengo este error:

error:

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

esta es mi clase:

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

y si no importo jspdf en angular.json, aparece este error cuando intenté descargar:

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

Answer 1

No tengo una buena solución, pero así es como la hice funcionar. Parece que jspdf 2.0.0 arroja "doc.fromHTML no es una función". en angular 10 (no estoy seguro de si funciona en las versiones angulares anteriores).

Eliminé jsdpf 2.0.0 usando

npm uninstall jspdf

Luego instalé la versión anterior que es:

npm install [email protected]

Ejemplo de trabajo:

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

El doc.fromHTML()problema también ocurrió en Angular 7.x. Si cambia a jsPDF 1.5.3, puede funcionar correctamente.