我不能在 Angular 10 中使用 jsPDF

Question

我试图使用jspdf 库打印我的页面。我已经尝试了很多解决方案来完成这里的示例以及几乎每个 Google 建议链接，但我仍然无法修复它。

这是我迄今为止尝试过的：

import * as jsPDF from 'jspdf';
.....
openPDF(): void {
    const DATA = this.couponPage.nativeElement;
    const doc = new jsPDF('p', 'pt', 'a4');
    doc.fromHTML(DATA.innerHTML, 15, 15);
    doc.output('dataurlnewwindow');
}

尝试像上面那样导入jsPDF会在编译时产生以下错误

src/...component.ts:42:21 中的错误 - 错误 TS2351：此表达式不可构造。 类型 'typeof import("jspdf")' 没有构造签名。

42     const doc = new jsPDF('p', 'pt', 'a4');

所以，我尝试按照stackoverflow answer 中的建议以另一种方式导入它

declare var jsPDF: any;

但这会产生一个控制台错误，指出 jsPDF 未定义。

然后我找到了另一个解决方案，发布在此处Angular 10/9/8 PDF Tutorial – Export PDF in Angular with JSPDF

现在按照这个方法我得到了以下错误

ERROR TypeError: doc.fromHTML is not a function openPDF notice.component.ts:43 ...Component_Template_button_click_2_listener ...component.html:3 角 23

我不知道我在这里错过了什么，因为这个库应该适用于所有 Angular 版本。任何帮助将不胜感激。

在这里我创建了一个Stackblitz project

Answer 1

在为这个问题尝试了这么多不同的解决方案之后，我发现addHTML 和fromHTML 在最新版本的jspdf 中都被贬低了，它们被替换为html。对于那些正在寻找更好的解决方案来使用jspdf 和Angular 10 的人来说，这是我目前发现的看起来有效的方法和更好的结果。

要导入 jspdf 版本 (2.x.x)，只需执行以下操作：import { jsPDF } from 'jspdf';。

您不需要像在以前的版本中那样将任何依赖项包含到angular.json 脚本中。如果您在index.html 内添加jspdf 或html2canvas 的脚本，也将它们删除。通过运行npm install jspdf，它还会安装html2canvas，它也是由jspdf动态导入的。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { jsPDF } from 'jspdf';

.....

 @ViewChild('couponPage', { static: true }) couponPage: ElementRef;

.......

openPDF(): void {
  const DATA = this.couponPage.nativeElement;
  const doc: jsPDF = new jsPDF("p", "mm", "a4");
  doc.html(DATA, {
     callback: (doc) => {
       doc.output("dataurlnewwindow");
     }
  });
}

虽然我仍然使用doc.html() 方法，但它不会使用 css 用于我的页面的样式。

Answer 2

在 stackblitz 上与 OP 合作了一小段时间后，似乎主要问题是库的使用在版本 1.3.5（示例中使用的版本）到 2.1.0（他的版本）之间发生了变化正在使用）。我正在添加这个答案，以便它可以为未来遇到类似问题的解决方案寻求者提供线索。

Answer 3

代替你使用的导入指令，试试

import jsPDF from 'jspdf';

请注意，如果您使用此方法，则必须删除

declare var jsPDF:any;