错误 TS2351：此表达式不可构造。类型 'typeof import("jspdf")' 没有构造签名

Question

我想在项目中将 html 文件转换为 pdf 文件，但出现错误，如何解决我的问题？

npm install jspdf

下载CvCompanent.ts：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  selector: 'app-download-cv',
  templateUrl: './download-cv.component.html',
  styleUrls: ['./download-cv.component.scss']
})
export class DownloadCvComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}
  @ViewChild('htmlData') htmlData:ElementRef;
  USERS = [
    {
      "id": 1,
      "name": "Leanne Graham",
      "email": "sincere@april.biz",
      "phone": "1-770-736-8031 x56442"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "email": "shanna@melissa.tv",
      "phone": "010-692-6593 x09125"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "email": "nathan@yesenia.net",
      "phone": "1-463-123-4447",
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "email": "julianne@kory.org",
      "phone": "493-170-9623 x156"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "email": "lucio@annie.ca",
      "phone": "(254)954-1289"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis",
      "email": "karley@jasper.info",
      "phone": "1-477-935-8478 x6430"
    }
  ];
  public openPDF():void {
    let DATA = this.htmlData.nativeElement;
    let doc = new jsPDF('p','pt', 'a4');
    doc.fromHTML(DATA.innerHTML,15,15);
    doc.output('dataurlnewwindow');
  }
  public downloadPDF():void {
    let DATA = this.htmlData.nativeElement;
    let doc = new jsPDF('p','pt', 'a4');
    let handleElement = {
      '#editor':function(element,renderer){
        return true;
      }
    };    
    doc.fromHTML(DATA.innerHTML,15,15,{
      'width': 200,
      'elementHandlers': handleElement
    });
    doc.save('angular-demo.pdf');
  }

}

下载CvCompanent.html：

<div class="container">
    <div class="row">

        <div class="col-md-8" id="htmlData" #htmlData>
            <table class="table table-bordered">
                <tr class="table-primary">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
                <tr *ngFor="let user of USERS">
                    <th>{{user.id}}</th>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                </tr>
            </table>
        </div>

        <div class="col-md-4 text-right">
            <button class="btn btn-success btn-block" (click)="openPDF()">Open PDF</button>
            <button class="btn btn-danger btn-block" (click)="downloadPDF()">Download PDF</button>
        </div>

    </div>
</div>

终端错误：

ERROR in src/app/layout/home/download-cv/download-cv.component.ts:57:19 - error TS2351: This expression is not constructable.
  Type 'typeof import("jspdf")' has no construct signatures.

57     let doc = new jsPDF('p','pt', 'a4');
                     ~~~~~
src/app/layout/home/download-cv/download-cv.component.ts:66:19 - error TS2351: This expression is not constructable.
  Type 'typeof import("jspdf")' has no construct signatures.

66     let doc = new jsPDF('p','pt', 'a4');

控制台中出现错误（单击“下载 PDF”按钮后；

core.js:6241 ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_1__ is not a constructor
    at DownloadCvComponent.downloadPDF (download-cv.component.ts:66)
    at DownloadCvComponent_Template_button_click_18_listener (download-cv.component.html:23)
    at executeListenerWithErrorHandling (core.js:21860)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21902)
    at HTMLButtonElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41686)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

包.json：

 { 
   ...
    "jspdf": "^2.3.0",
   ...
 }

我该如何解决我的问题？

Answer 1

你应该使用它来导入库：

    import { jsPDF } from 'jspdf'

重要的！使用此 ES6 语法，您不需要通过以下脚本部分导入库angular.json

接下来，您需要使用该callback功能来显示或下载pdf文件：

    import { jsPDF } from 'jspdf'

工作演示

更新：

• 该fromHTML功能在2.0.0中被替换html。如果您要从 1.xx 迁移到 2.xx，您应该注意其他重大更改