Cảnh báo Angular- jsPDF, dày không mong đợi và jsPDF.fromHTML không phải là một hàm

Question

Tôi muốn in mã html whit jsPDF trong Angular nhưng tôi không thể. tôi cần giúp đỡ, nhìn này.

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ô-đun jspdf npm

nhập mô tả hình ảnh ở đây

tập lệnh angle.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"
            ]

nếu trong lớp tôi nhập như thế này import jsPDF from 'jspdf';hoặc như thế này import { jsPDF } from "jspdf";tôi nhận được cảnh báo này và lỗi này.

cảnh báo:

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

lỗi:

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

nếu tôi nhập jspdf như thế này, import * as jsPDF from "jspdf";tôi gặp lỗi này:

lỗi:

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

đây là lớp học của tôi:

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

và nếu tôi không nhập jspdf trong angle.json, tôi gặp lỗi này khi cố tải xuống:

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

Answer 1

Tôi không có một giải pháp tốt nhưng đây là cách tôi làm cho nó hoạt động. Có vẻ như jspdf 2.0.0 đang ném "doc.fromHTML không phải là một hàm". ở góc 10 (Tôi không chắc liệu nó có hoạt động trong các phiên bản góc trước đó không.)

Tôi đã xóa jsdpf 2.0.0 bằng cách sử dụng

npm uninstall jspdf

Sau đó, tôi đã cài đặt phiên bản trước đó là:

npm install [email protected]

Làm việcVí dụ:

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

Sự cố cũng doc.fromHTML()xảy ra trên Angular 7.x. Nếu hạ cấp xuống jsPDF 1.5.3, nó có thể hoạt động bình thường.