Проблема с преобразованием HTML в PDF в Angular 7 (с использованием ASP.Net Core)

Question

У меня есть квитанция, которая генерируется нормально.При нажатии кнопки печати (вверху слева) он пытается сохранить файл PDF в методе captureScreen ().

В консоли я вижу, что попадаю на строку: pdf.addimage (..), а затемget:

core.js: 12501 ОШИБКА Ошибка: Uncaught (в обещании): TypeError: pdf.addImage не является функцией TypeError: pdf.addImage не является функцией

Кроме того, я простозаметил (едва может их видеть), что эти 2 строки:

import * as jsPDF from "jspdf";
import html2canvas from "html2canvas";

имеют elipses после 'from'.

import * as jsPDF from ..."jspdf";
import html2canvas from ..."html2canvas";

Это указывает на то, что он не смог найти файл объявления для модуляjspdf или html2canvas.

Как мне это решить?

Вот файл app.generateRecepit.Component.s:1022 *

import { Component, OnInit } from "@angular/core";
import * as jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { Router, ActivatedRoute } from "@angular/router";
import { GenerateRecepit } from "./Services/app.GenerateRecepit.Service";
import { GenerateRecepitRequestModel } from 
"./Models/app.GenerateRecepitRequestModel";
import { GenerateRecepitViewModel } from 
"./Models/app.GenerateRecepitViewModel";

@Component({
  templateUrl: "./Recepit.html",
  styleUrls: [
    "../Content/vendor/bootstrap/css/bootstrap.min.css",
    "../Content/vendor/metisMenu/metisMenu.min.css",
    "../Content/dist/css/sb-admin-2.css",
    "../Content/vendor/font-awesome/css/font-awesome.min.css"
 ]
})
export class GenerateRecepitComponent implements OnInit {
   PaymentID: any;
   private _generateRecepit;
   GenerateRecepitRequestModel: GenerateRecepitRequestModel = new 
   GenerateRecepitRequestModel();
   GenerateRecepitViewModel: GenerateRecepitViewModel = new 
   GenerateRecepitViewModel();
   errorMessage: any;
   today: any;

  constructor(
    private _Route: Router,
    private _routeParams: ActivatedRoute,
    private generateRecepit: GenerateRecepit
  ) {
    this._generateRecepit = generateRecepit;
  }

  ngOnInit(): void {
    this.PaymentID = this._routeParams.snapshot.params["PaymentID"];
    this.today = new Date();
    this.GenerateRecepitRequestModel.PaymentID = this.PaymentID;

    this._generateRecepit
      .GetRecepitDetails(this.GenerateRecepitRequestModel)
      .subscribe(
        recepitdetails => {
          this.GenerateRecepitViewModel = recepitdetails;
        },
        error => (this.errorMessage = <any>error)
      );
  }

  public captureScreen() {
    var data = document.getElementById("print");

    html2canvas(data).then(canvas => {
     var imgWidth = 210;
     var pageHeight = 297;
     var imgHeight = (canvas.height * imgWidth) / canvas.width;
     var heightLeft = imgHeight;

     const contentDataURL = canvas.toDataURL("image/png");

     let pdf = new jsPDF("p", "mm", "a4");
     var position = 0;

     pdf.addImage(contentDataURL, "PNG", 20, 20, imgWidth, imgHeight);

     // Generates a PDF.
     pdf.save("PaymentReceipt.pdf");
    });
  }
}

Вот файл Recepit.html:

<script src="../../../node_modules/jspdf/dist/jspdf.debug.js"></script>

<div style="margin-top:10px;" class="row">
    <div class="col-md-4">
        <!-- Button - wired to the component's captureScreen() event. -->
        <input type="button" value="Print" class="btn btn-default" 
(click)="captureScreen()" />
    </div>
</div>

<div style="margin-top:20px;" id="print">
    <form #f="ngForm" novalidate (ngSubmit)="onSubmit()">
        <div style="margin-top:20px;" class="row">
            <div class="well col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 
   col-sm-offset-1 col-md-offset-3">
                <div class="row">
                    <div class="text-center text-danger">
                        <em>
                          <h1><strong>Dan's GYM </strong></h1>
                        </em>
                        <hr>
                        <em>
                            <h6>Receipt</h6>
                        </em>
                        <hr>
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <p>
                            <b>Name : </b> <em> 
   {{GenerateRecepitViewModel.MemberName}}</em>
                        </p>
                        <address>
                          <br>
                          <em> <strong>From : </strong> 
   {{GenerateRecepitViewModel.PaymentFromdt}} </em>
                          <br>
                          <em> <strong>To : </strong> 
    {{GenerateRecepitViewModel.PaymentTodt}} </em>
                          <br>
                        </address>
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                        <p>
                            <em><strong>Date:</strong> {{today | 
    date:'fullDate'}}</em>
                        </p>
                        <p>
                            <em> <strong>Member Id </strong> #: 
    {{GenerateRecepitViewModel.MemberNo}}</em>
                        </p>
                        <p>
                            <em> <strong>Next Renewal Date</strong> #: 
   {{GenerateRecepitViewModel.NextRenwalDate}}</em>
                        </p>
                    </div>
                </div>

                <div class="row">
                    <table class="table table-hover">
                       <thead>
                            <tr>
                                <th>Srno.</th>
                                <th style="text-align: center">Scheme</th>
                                <th style="text-align: center">Plan</th>
                                <th class="text-center"></th>
                                <th class="text-center">Total</th>
                            </tr>
                       </thead>

                        <tbody>
                            <tr>
                                <td class="col-md-1"><em>1</em>
                                </td>
                                <td class="col-md-5" style="text-align: 
center"> {{GenerateRecepitViewModel.SchemeName}} </td>
                                <td class="col-md-4" style="text-align: 
center"> {{GenerateRecepitViewModel.PlanName}} </td>
                                <td class="col-md-1 text-center"></td>
                                <td class="col-md-1 text-center"> 
   {{GenerateRecepitViewModel.PlanAmount}}</td>
                            </tr>

                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-right">
                                   <p>
                                       <strong>Subtotal:</strong>
                                    </p>
                                    <p>
                                        <strong>Tax:</strong>
                                    </p>
                                </td>
                                <td class="text-center">
                                    <p>
                                        <strong> 
   {{GenerateRecepitViewModel.ServicetaxAmount}}</strong>
                                    </p>
                                    <p>
                                        <strong> 
   {{GenerateRecepitViewModel.ServiceTax}}</strong>
                                    </p>
                                </td>
                            </tr>

                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-right">
                                    <h4><strong>Total:</strong></h4>
                                </td>
                                <td class="text-center text-danger">
                                    <h4><strong> 
   {{GenerateRecepitViewModel.PaymentAmount}}</strong></h4>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </form>
</div>