Angular- jsPDF 警告、意外令牌和 jsPDF.fromHTML 不是函数答案

【问题标题】：Angular- jsPDF warnings, uncexpected tocken and jsPDF.fromHTML is not a functionAngular- jsPDF 警告、意外令牌和 jsPDF.fromHTML 不是函数
【发布时间】：2020-08-29 20:05:14
【问题描述】：

我想在 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 模块

enter image description here

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'

如果我像这样import * as jsPDF from "jspdf"; 导入 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

【问题讨论】：

当您将某些内容作为这样的脚本加载时，您不会导入它，而是将其作为全局访问。既然它似乎是一个模块，为什么要将它作为脚本加载？
fromHTML 正在工作然后我将我的角度从 9 更新到 10 现在我得到 doc.fromHTML 不是一个函数。
是的，我在 Angular 10 @Nakres 工作
@AluanHaddad，因为在所有教程中，人们将其作为脚本导入，但我会尝试你的建议..
检查release note：删除了以前标记为已弃用的 API。即：addHTML、fromHTML、html2pdf、addSvg、addButton、addTextField、addChoiceField, cellInitialize, setFontStyle, setFontType, clip_fixed.

标签： angular typescript jspdf

【解决方案1】：

我没有一个好的解决方案，但这就是我让它发挥作用的方式。看起来 jspdf 2.0.0 正在抛出“doc.fromHTML 不是函数”。在 Angular 10 中（我不确定它是否适用于以前的 Angular 版本。）

我删除了 jsdpf 2.0.0 使用

npm uninstall jspdf

然后我安装了以前的版本：

npm install jspdf@1.5.3

工作示例：

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');

【讨论】：

【解决方案2】：

doc.fromHTML() 问题也发生在 Angular 7.x 上。如果降级到jsPDF 1.5.3，就可以正常使用了。

【讨论】：