带有 jsPDF 模块 : Type 'typeof jsPDF' has no construct signatures 的 Angular 9

Question

Angular 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"**
            ]

Answer 1

(在 Angular 10 中测试，所以我猜这个修复程序适用于较新的 Angular 版本)
而不是这个:

import * as jsPDF from 'jspdf';

写这个:

import jspdf from 'jspdf';

[ 小心 !两个jspdf第 2 行是小写字母 ]
那么你的

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

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

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