Angular- jsPDF警告、予期しないtocken、およびjsPDF.fromHTMLは関数ではありません

Aug 16 2020

jsPDFでhtmlコードをAngularで印刷したいのですが、できません。助けが必要です、見てください。

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

npmjspdfモジュール

ここに画像の説明を入力してください

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

クラスでこのように、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

回答

5 Nakres Aug 18 2020 at 05:16

私には良い解決策がありませんが、これが私がそれを機能させた方法です。jspdf2.0.0が「doc.fromHTMLは関数ではありません」をスローしているようです。角度10で(以前の角度バージョンで機能するかどうかはわかりません。)

jsdpf2.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');
hyzhang6639 Aug 23 2020 at 19:54

このdoc.fromHTML()問題はAngular7.xでも発生しました。jsPDF 1.5.3にダウングレードすると、正常に動作します。