CodeSandBox: Angular: ERROR TypeError: html2canvas_1.default не является функцией - PullRequest
Новая
       104

CodeSandBox: Angular: ERROR TypeError: html2canvas_1.default не является функцией

0 голосов
/ 21 июня 2020

Мой проект должен преобразовать простую таблицу html в PDF. Но я получаю эти ошибки на CodeSandbox : 

ERROR TypeError: html2canvas_1.default is not a function
    at AppComponent.downloadPDF (https://3d3bh.csb.app/src/app/app.component.ts:66:30)

    at new AppComponent (https://3d3bh.csb.app/src/app/app.component.ts:62:14)

Вот app.component. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Basic Table</h2>
      <p>
        The .table class adds basic styling (light padding and only horizontal
        dividers) to a table:
      </p>
      <table class="table" id="purchaseTable">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

app.component.ts 

import { Component } from "@angular/core";
import * as jspdf from "jspdf";
import  html2canvas from "html2canvas";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  constructor(){
    this.downloadPDF();
  }
  purchases = [
    {
      item_id: "1000",
      item_name: "PEn",
      item_quantity: "2.66",
      item_rate: "3.69",
      item_purchase_date: "2020-05-13T00:00:00Z"
    },
    {
      item_id: "1003",
      item_name: "pencil",
      item_quantity: "20",
      item_rate: "5.5",
      item_purchase_date: "2020-05-09T00:00:00Z"
    },
    {
      item_id: "1001",
      item_name: "pen",
      item_quantity: "10",
      item_rate: "5.5",
      item_purchase_date: "2020-04-04T00:00:00Z"
    },
    {
      item_id: "1002",
      item_name: "rubber",
      item_quantity: "5",
      item_rate: "5.5",
      item_purchase_date: "2019-01-01T00:00:00Z"
    },
    {
      item_id: "1004",
      item_name: "box",
      item_quantity: "63",
      item_rate: "20.5",
      item_purchase_date: "2020-06-12T00:00:00Z"
    },
    {
      item_id: "1005",
      item_name: "glue",
      item_quantity: "2",
      item_rate: "36.3",
      item_purchase_date: "2020-06-19T00:00:00Z"
    }
  ];

  downloadPDF() {
    const data = document.getElementById("purchaseTable"); // Id of the table
    html2canvas(data).then(canvas => {
      const imgWidth = 208;
      //const pageHeight = 295;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      //const heightLeft = imgHeight;

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

      const pdf = new jspdf("p", "mm", "a4"); // A4 size page of PDF
      //const position = 0;

      pdf.addImage(contentDataURL, "PNG", 18, 30, imgWidth - 21, imgHeight);

      pdf.save("MYPdf.pdf"); // Generated PDF
    });
  }
}

У меня есть html таблица app.component. html файл. У меня есть функция downloadPDF() в app.component.ts . Моя цель: при загрузке файла .ts его конструктор вызовет функцию downloadPDF, и я смогу загрузить этот файл оттуда.

Полный журнал проекта и журнал ошибок можно увидеть здесь: https://codesandbox.io/s/jolly-bhabha-3d3bh

1 Ответ

0 голосов
/ 01 сентября 2020

Наконец, я понял, что произошло,

Используемая angular версия codeandbox не поддерживает импорт html2canvas следующим образом: 

import  html2canvas from "html2canvas";

просто измените его на: 

import * as _html2canvas from "html2canvas";
const html2canvas: any = _html2canvas;

И все работает

...