个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
33
4
我的项目应该将一个简单的 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.ts 中有一个 downloadPDF() 函数。我的目标是:加载 .ts 文件时，其构造函数将调用 downloadPDF 函数，我可以从那里下载该文件。
您可以在此处查看完整的项目和错误日志:https://codesandbox.io/s/jolly-bhabha-3d3bh
最佳答案
终于明白是怎么回事了
codesandbox 使用的 Angular 版本不支持这样的 html2canvas 导入:
import html2canvas from "html2canvas";
只需将其更改为:
import * as _html2canvas from "html2canvas";
const html2canvas: any = _html2canvas;
所有作品
关于angular - CodeSandBox:Angular:错误类型错误:html2canvas_1.default 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62495059/
33
4
0
我创建了一个 CodeSandbox来自 github 仓库。如何同步到 CodeSandbox如果有一些提交推送到 github repo？我看到 Codesandbox 上有一个 github V
问题: 如何在浏览器中运行实时开发服务器？ 上下文 Stackblitz和 CodeSandbox是两个提供在线 IDE 来开发 Web 应用程序的平台。我有一个类似的用例，需要在浏览器开发服务器中运
在此表中，我想添加一些具有宽度的列。如果列的宽度大于页面的宽度，则不会显示水平滚动条。 如何从沙盒中重新制作示例并添加水平滚动条？可以通过 Table 组件来做到这一点吗？ https://codes
我一直在尝试使用 tag 添加图像在 CodeSandbox.io .但是，每次我尝试添加它时，它都不会显示，只是默认为 alt标签(显示山)。 我正在尝试在与包含此 JS 文件的文件相同的文件夹中
我一直在尝试使用 tag 添加图像在 CodeSandbox.io .但是，每次我尝试添加它时，它都不会显示，只是默认为 alt标签(显示山)。 我正在尝试在与包含此 JS 文件的文件相同的文件夹中
现在我正在尝试从互联网上随机复制页面以提高我的技能。知道我正在复制 https://www.techonthenet.com/postgresql/is_not_null.phphttps://www
我正在尝试通过导入GitHub存储库来使用codesandbox。我无法编辑Package.json文件的内容。它说不能在Ready Only编辑器中编辑。如何解决这个错误？
我正在尝试构建一个项目，我只是将我的代码从 VSCode 移到了 Codesandbox。我必须提到代码在 VSC 中运行良好，但由于某种原因它在 Codesandbox 中无法运行——找不到 CSS
在 FIREFOX 中:当我执行代码时，我应该得到的典型错误是:“TypeError:无法读取未定义的属性‘setState’”，相反，我收到了一个非常奇怪的跨源错误。 这是错误的屏幕截图: http
在通过codesandbox运行reactjs项目时，我收到unexpected token on line 5错误。当我在本地计算机上运行该应用程序时，它不会出现错误。 import React,
我在 CodeSandBox/StackBlitz 等在线 IDE 中遇到奇怪的错误。我做了一个示例 http 请求(使用 axios 但使用 fetch 或其他问题是相同的)并尝试在控制台中打印响应
我的项目应该将一个简单的 html 表格转换为 PDF。但是我在 CodeSandbox 上遇到了这个错误: ERROR TypeError: html2canvas_1.default is not
我的项目应该将一个简单的 html 表格转换为 PDF。但是我在 CodeSandbox 上遇到了这个错误: ERROR TypeError: html2canvas_1.default is not
我一定是遗漏了一些非常简单的东西，但是有人能帮我理解为什么两个路由中的 anchor 在 Gatsby 沙箱中没有任何效果吗: https://codesandbox.io/s/k59wzx899r
我已经构建了一个小型 nuxt.js 应用程序，它在 CodeSandbox 上运行良好，这里是它的链接:https://codesandbox.io/s/github/Ayman-Tarig/nux
我能够在 http://localhost:3001 上将其作为本地应用程序运行使用 npm start , 但如果它用于 CodeSandbox或堆栈溢出片段，获取失败。如果我使用其他 API ht
在“codesandbox.io”上，我如何配置“Prettier”以不再更改我的换行符(或者可能完全停用“Priettier”)？ 另外，我如何在那里停用 ESLint 中的某个规则(在我的情况下，
在 ReactJS 中，我正在映射一些数据并尝试让所有标签复选框及其第一个值在默认情况下被选中，并且还能够取消选中复选框，这也将取消选中选定的单选按钮值。 代码框链接 https://codesand
我正在尝试在 CodeSandbox 上测试 Material-UI 组件。并不断收到错误: TypeError undefined is not an object (evaluating '_co
我正在尝试在 react.js 中实现一个简单的代码，用户可以使用表单输入数据，除非刷新页面，否则数据将显示在表格中。 我已经在 Code Sandbox 中实现了一个代码，它按预期工作。然后我复制该
我是一名优秀的程序员,十分优秀！