1

我的项目应该将一个简单的 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文件。我在app.component.tsdownloadPDF()中有一个函数。我的目标是：加载 .ts 文件时，它的构造函数将调用函数，我可以从那里下载这个文件。downloadPDF

您可以在此处查看完整的项目和错误日志：https ://codesandbox.io/s/jolly-bhabha-3d3bh

4

1 回答 1

2

终于明白是怎么回事了

使用的角度版本代码框不支持html2canvas这样的导入：

import  html2canvas from "html2canvas";

只需将其更改为：

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

所有作品

于 2020-09-01T07:56:40.170 回答