我不能将 jsPDF 与 Angular 10 一起使用

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 会在编译时产生以下错误

ERROR in src/...component.ts:42:21 - error TS2351: This expression is not constructable. Type 'typeof import("jspdf")' has no construct signatures.
42     const doc = new jsPDF('p', 'pt', 'a4');

所以，我尝试按照

中建议的另一种方式导入它

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 Angular 23

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

这里我创建了一个Stackblitz project

Answer 1

尝试使用

而不是您正在使用的导入指令

import jsPDF from 'jspdf';

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

declare var jsPDF:any;

Answer 2

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

Answer 3

在为这个问题尝试了很多不同的解决方案之后，我发现 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");
     }
  });
}

Though for me still using doc.html() method, it wouldn't use the css style that I used for my page.

我不能将 jsPDF 与 Angular 10 一起使用

I cannot use jsPDF with Angular 10

jspdf

angular