在angular2中使用html2canvas Typescript应用程序获取错误
我想在我的Angular2应用程序中实现打印功能。我遇到了这个包html2canvas。它看起来令人印象深刻,但是当我试图将它包含在我的应用程序中时,它会抛出一个错误。在angular2中使用html2canvas Typescript应用程序获取错误
这里是我的脚步,我也跟着
- 从here下载js文件
- 新增
<script src="scripts/html2canvas.js"></script>
- 在TS文件中声明
declare var html2canvas: any;
-
添加代码打印(当用户点击打印按钮 - 测试代码)
printview(): void { html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); }
,但只要用户点击打印按钮我得到以下错误
browser_adapter.ts:78 ReferenceError: html2canvas is not defined
任何帮助或提示将是有益的......
打字稿需要定义以识别VanillaJS框架。
认为它这样,打字稿依赖于它为了鉴定对象富人的TS文件,html2canvas包含在你的HTML,但打字稿现在已经确定html2canvas对象的方式。
可能的解决方案:
最佳:
升级到打字稿2 *,并使用新的 'typeRoots' 和 '类型' 字段。
按照以下步骤升级到TS 2.0+
npm i @types/html2canvas
后更新 'tsconfig.json' 文件,像这样:
{ "compilerOptions": { // your options, "typeRoots": [ "./node_modules/@types" ], "types": [ "html2canvas" ] } }
可接受:
手动下载定义文件(不推荐,因为您需要通过手动获取最新版本来维护每个更新的定义)。
快速和肮脏的:
创建“references.d。TS'在你的根文件夹(旁边tsconfig.json)文件,并写入以下内容:
declare var html2canvas: any;
通过这样做,transpiler会知道你作为一个编码器都知道的‘html2canvas’的存在,所以它不会把它看成一个错误(与本次重大缺点‘解决方案’是,你必须为图书馆所以基本上你只是盲目编写代码没有IntelliSense支持。
所以对于一个坚实的项目我推荐最好的解决方案,如果您只是为了测试目的而玩TS,其他任何解决方案都可以。
如果您想了解更多关于新类型属性包含在TS2,读这个其他问题的答复:
Typescript 2.0. "types" field in tsconfig.json
当然和参考文档:
https://www.typescriptlang.org/docs/handbook/compiler-options.html
在'tsconfig,json'文件中指定的'typeRoots'是不是错误来额外指定'types'元素?即不应该仅仅指定'typeRoots'? – Cuga
感谢您的好评。 我永远不会进入.then(...)。我收到以下错误: __WEBPACK_IMPORTED_MODULE_7_html2canvas__不是函数 任何想法,将不胜感激! – Toolsmythe
您是否验证过html2canvas.js实际上已加载? – sideroxylon
是的,我确实验证过...它一直在加载罚款... – microchip78