在 angular2 Typescript 应用程序中使用 html2canvas 出现错误

Question

我正在尝试在我的 Angular2 应用程序中实现打印功能。我遇到了这个包 html2canvas。它看起来令人印象深刻，但是当我尝试将其包含在我的应用程序中时，它会抛出一个错误。

这是我遵循的步骤

1. 从here下载的js文件
2. 已添加<script src="scripts/html2canvas.js"></script>
3. 在 TS 文件中声明declare var html2canvas: any;

4. 添加代码打印（当用户点击打印按钮 - 测试代码）

   printview(): void { html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); }

但是一旦用户单击打印按钮，我就会收到以下错误

browser_adapter.ts:78 ReferenceError: html2canvas is not defined

任何帮助或提示都会很有用...

Answer 1

TypeScript 需要定义才能识别 VanillaJS 框架。

这样想，TypeScript 依赖它拥有的 TS 文件来识别对象，html2canvas 包含在您的 HTML 中，但 TypeScript 现在有识别 html2canvas 的方法强>对象。

可能的解决方案：

---

最佳：

升级到 TypeScript 2.* 并使用新的“typeRoots”和“types”字段。

升级到 TS 2.0+ 后按照这些步骤操作

npm i @types/html2canvas

并像这样更新您的“tsconfig.json”文件：

{ "compilerOptions": { // your options, "typeRoots": [ "./node_modules/@types" ], "types": [ "html2canvas" ] } }

---

可接受：

手动下载定义文件（不推荐，因为您需要通过手动获取最新版本来维护每个更新的定义）。

---

又快又脏：

在您的根文件夹（tsconfig.json 旁边）中创建一个“references.d.ts”文件并写入以下内容：

declare var html2canvas: any;

通过这样做，转译器将知道您作为编码人员知道“html2canvas”的存在，因此它不会将其视为错误（此“解决方案”的主要缺点是您没有 IntelliSense对库的支持，所以基本上你只是在盲目地编写代码。

---

因此，对于一个可靠的项目，我推荐最佳解决方案，如果您只是想使用 TS 进行测试，任何其他解决方案都可以:)。

如果您想详细了解 TS2 中包含的新类型属性，请阅读对其他问题的回复：

Typescript 2.0. "types" field in tsconfig.json

当然还要查阅文档：

https://www.typescriptlang.org/docs/handbook/compiler-options.html