我不能在 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像上面那样导入会在编译时产生以下错误

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

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

因此，我尝试按照此stackoverflow 答案中的建议以另一种方式导入它

declare var jsPDF: any;

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

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

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

错误类型错误：doc.fromHTML 不是函数 openPDF notice.component.ts:43 ...Component_Template_button_click_2_listener ...component.html:3 Angular 23

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

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

Answer 1

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

要导入jspdf的版本（2.xx的），只是简单地做：import { jsPDF } from 'jspdf';。

您不需要angular.json像在以前的版本中那样将任何依赖项包含到脚本中。如果您在jspdf或html2canvas内部添加脚本index.html，也将它们删除。通过运行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我用于页面的 样式。