在angular2 Typescript應用程序中使用html2canvas出現錯誤

Question

我正在嘗試在Angular2應用程序中實現打印功能。 我碰到了這個包html2canvas。 它看起來令人印象深刻，但是當我嘗試將其包含在我的應用程序中時，會拋出一個錯誤。

這是我遵循的步驟

1. 從這里下載的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中包含的新類型屬性的更多信息，請閱讀對另一個問題的回答：

打字稿2.0。 tsconfig.json中的“類型”字段

當然請查閱文檔：

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