Angular- jsPDF 경고, 예기치 않은 tocken 및 jsPDF.fromHTML은 함수가 아닙니다.

Question

Angular에서 jsPDF html 코드를 인쇄하고 싶지만 할 수 없습니다. 도움이 필요 해요.

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 모듈

여기에 이미지 설명 입력

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

수업에서 이와 같이 가져 import jsPDF from 'jspdf';오거나 이와 같이 가져 import { jsPDF } from "jspdf";오면이 경고 와이 오류가 발생합니다.

경고:

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

오류:

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

이렇게 jspdf를 가져 오면 import * as jsPDF from "jspdf";이 오류가 발생합니다.

오류:

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

이것은 내 수업입니다.

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

angular.json에서 jspdf를 가져 오지 않으면 다운로드하려고 할 때이 오류가 발생합니다.

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

Answer 1

나는 좋은 해결책이 없지만 이것이 내가 작동하게 만든 방법입니다. jspdf 2.0.0이 "doc.fromHTML은 함수가 아닙니다."를 던지는 것처럼 보입니다. 각도 10에서 (이전 각도 버전에서 작동하는지 확실하지 않습니다.)

나는 jsdpf 2.0.0을 사용하여 제거했습니다.

npm uninstall jspdf

그런 다음 이전 버전을 설치했습니다.

npm install [email protected]

작동 예 :

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

doc.fromHTML()문제도 각도 7.x의에 일어났다. jsPDF 1.5.3으로 다운 그레이드하면 제대로 작동 할 수 있습니다.