我无法在Angular 10中使用jsPDF

Question

我正在尝试使用jspdf库打印我的页面。我已经尝试了许多解决方案，遵循此处的示例和几乎每个谷歌建议链接，但我仍然无法解决它。

到目前为止，我已经尝试了以下方法：

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

因此，我尝试了另一种方式导入它，正如这个stackoverflow答案中建议的那样。

declare var jsPDF: any;

然而，这样会创建一个控制台错误，说jsPDF未定义。

然后我发现另一种解决方案，如此发帖 Angular 10/9/8 PDF教程-使用JSPDF在Angular中导出PDF

按照这种方法，现在我得到了以下错误：

ERROR TypeError：doc.fromHTML不是函数 openPDF notice.component.ts:43 ...Component_Template_button_click_2_listener ...component.html:3 Angular 23

我不知道我错过了什么，因为这个库应该在所有Angular版本中都能工作。任何帮助将不胜感激。

在这里，我创建了一个 Stackblitz项目

- Kirubel

---

您可以参考此处的 Stackblitz，了解如何导入 jsPDF：https://stackblitz.com/edit/jspdf-fpmqwp - ruth

你是否在 angular.json 的 scripts 中添加了 "./node_modules/jspdf/dist/jspdf.min.js"？否则 declare var... 将不会成功。 - CharybdeBE

@CharybdeBE 是的，我已经在 angular.json 中包含了。 - Kirubel

@MichaelD，它仍然无法工作，仍然会抛出一个控制台错误doc.fromHTML不是一个函数。 - Kirubel

Answer 1

在尝试了许多解决方案后，我发现最新版本的 jspdf 已经弃用了 addHTML 和 fromHTML 方法，取而代之的是 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 样式。

- Kirubel

---

当我按照您所解释的方式尝试时，我收到了 core.js:6162 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'createElement' of undefined TypeError: Cannot read property 'createElement' of undefined。您在实现中是否遇到过这个错误？ - Shashank Vivek

Answer 2

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

- Boluc Papuccuoglu

Answer 3

尝试使用不同的导入指令：

import jsPDF from 'jspdf';

请注意，如果您使用此方法，您将不得不删除。

declare var jsPDF:any;

- Boluc Papuccuoglu

---

当您使用特定的导入指令时，您收到了什么错误消息？ - Boluc Papuccuoglu

所以切换导入语句将问题从编译时移动到运行时。你确定删除了声明语句吗？另外，你用来实例化doc变量的那一行是什么？（包含doc=new jsPDF(...)的那一行） - Boluc Papuccuoglu

是的，我很确定在导入“jspdf”时已经删除了声明语句。这就是我实例化doc变量的方式：const doc = new jsPDF('p', 'pt', 'a4'); 我不知道我在这里做错了什么。 - Kirubel

我也尝试过了，还是出现同样的错误。即使按照文档本身的说明，addHTML和fromHTML在控制台中都会抛出“不是函数”的错误。这个问题让我头疼。 :( - Kirubel

让我们在聊天中继续这个讨论。 - Boluc Papuccuoglu

Answer 4

我刚在我的项目目录中运行了“npm install jspdf”，并且它对我有效。

- Jeyshalini Tevosha AP RSethura