My project should convert a simple html table to PDF. But I get this errors on 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)
Here is 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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</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
});
}
}
I have a html table app.component.html file. I have a downloadPDF() function in app.component.ts. My goal is : when the .ts file is loaded, its constructor will call downloadPDF function and I can download this file from there.
You can see full project and error log here : https://codesandbox.io/s/jolly-bhabha-3d3bh
Finally I have understood what happened,
The angular version codesandbox is using doesn't support html2canvas import like this:
import html2canvas from "html2canvas";
just change it to :
import * as _html2canvas from "html2canvas";
const html2canvas: any = _html2canvas;
And all works