带有 jsPDF 模块的 Angular 9：类型“typeof jsPDF”没有构造签名

Posted 2023-03-07

【中文标题】带有 jsPDF 模块的 Angular 9：类型“typeof jsPDF”没有构造签名

【英文标题】：Angular 9 with jsPDF module : Type 'typeof jsPDF' has no construct signatures

【发布时间】：2020-10-17 22:03:56

【问题描述】：

角度 9 有问题 jsPDF 的模块（安装的类型 + 包本身）

当做 ng serve 它工作 执行 ng build --prod 时，出现错误

ERROR in src/app/xxx/xxxx.componentomponent.ts:52:27 - error TS2351: This expression is not constructable.
  Type 'typeof jsPDF' has no construct signatures.

52       let pdf = new jsPDF('p', 'mm', 'a4');
                             ~~~~~

  src/app/xxx/xxxx.component.ts:7:1
    7 import * as jsPDF from 'jspdf';
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

tsconfig 文件有 "esModuleInterop": true,

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "target": "es2015",
    "allowSyntheticDefaultImports":true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  ,
  "angularCompilerOptions": 
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  

我这样导入模块：

**import * as jsPDF from 'jspdf';**

在我的课堂上这样使用它：

 generatePDF() 
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => 
      var imgWidth = 208;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = **new jsPDF**('p', 'mm', 'a4');
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('skill-set.pdf');
    );
  

我还尝试在 angular.json 的脚本部分添加模块 js 文件

  "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              **"node_modules/jspdf/dist/jspdf.min.js"**
            ]

【问题讨论】：

尝试将 jsPDF 安装为节点模块：npm install -S jspdf 并从 angular.json 删除脚本导入

我最初是用 npm install jspdf --save 完成的，然后像模块一样尝试

你也安装@types/jspdf?

@David 是的，我做到了。我发现了问题所在，我发送了几个参数，正如我在 web 上的一篇文章中发现的那样。 **新的 jsPDF**('p', 'mm', 'a4');去掉参数，问题解决了

【参考方案1】：

我设置了一个全新的 Angular 10 项目，并且能够使用 jspdf。

创建新的 Angular 应用

> npx @angular/cli new pdf-viewer --strict --defaults true

从 npm 注册表安装 jspdf 包

> cd pdf-viewer
> npm install jspdf --save
> npm install @types/jspdf --save-dev

更新tsconfig.base.json。在compilerOptions 中添加allowSyntheticDefaultImports

"allowSyntheticDefaultImports": true

添加一些jspdf 代码以在src/app/app.component.ts 中进行测试

import  Component, ChangeDetectionStrategy  from '@angular/core';
import jsPDF from 'jspdf';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
)
export class AppComponent 
  title = 'pdf-viewer';

  constructor() 
    this.generatePDF();
  

  private generatePDF(): void 
    const doc = new jsPDF();

    doc.text('Hello world!', 10, 10);
    doc.save('a4.pdf');
  

启动 Angular 应用程序并导航到 http://localhost:4200。您会注意到a4.pdf 一打开网页就会下载。打开 PDF 文件以验证文件的完整性。

> npm start

【讨论】：

我发现这是错误的。在我的代码中，我传递了一些参数“new jsPDF**('p', 'mm', 'a4')”，正如我在一些示例中找到的那样。这实际上是问题所在。一旦我更改为 **new jsPDF**() 声明，错误就消失了

【参考方案2】：

（在 Angular 10 中测试，所以我猜这个修复适用于较新的 Angular 版本）

而不是这个：

import * as jsPDF from 'jspdf';

写这个：

import jspdf from 'jspdf';

[小心！第二行的jspdf都是小写字母]

那么你的

let pdf = new jsPDF('p', 'mm', 'a4'); 

也可以，只需将全部更改为小写字母（在执行此操作之前，您必须像我的第二个导入行一样以小写字母导入）

let pdf = new jspdf('p', 'mm', 'a4');

【参考方案3】：

而不是这个：

import * as jsPDF from 'jspdf';

写这个：

import JSPDF from 'jspdf';

那么你的

let pdf = new JSPDF.jsPDF(); 

【参考方案4】：

像这样导入：

import  jsPDF  from 'jspdf';

// and Initialize JSPDF
var doc = new jsPDF("p", "mm", "a4");

这对我有用。