Angular 9 с модулем jsPDF: тип 'typeof jsPDF' не имеет сигнатуры конструкции

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

Я также попытался добавить файлы модуля js в раздел скриптов angular.json

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

Answer 2

Я установил новый проект angular 10 и смог использовать jspdf.

1. Создать новое приложение Angular

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

2. Установить jspdf пакет из реестра npm

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

3. Обновить tsconfig.base.json. ДобавитьallowSyntheticDefaultImports внутри compilerOptions

"allowSyntheticDefaultImports": true

4. Добавь немного 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');
  }
}

5. Запустите приложение angular и перейдите к http://localhost:4200. Вы заметите, чтоa4.pdfзагружается, как только мы открываем веб-страницу. Откройте файл PDF, чтобы проверить целостность файла.

> npm start

Answer 3

просто импортируйте вот так: import {jsPDF} from 'jspdf';

// и инициализируем JSPDFvar doc = new jsPDF("p", "mm", "a4");

// это работа для меня

Answer 4

Вместо этого:

import * as jsPDF from 'jspdf';

напишите это:

import JSPDF from 'jspdf';

тогда твой

let pdf = new JSPDF.jsPDF();