html2canvas 回调 Onrendered 在 Angular 2 中不起作用答案

【问题标题】：html2canvas callback Onrendered doesn't work in Angular 2html2canvas 回调 Onrendered 在 Angular 2 中不起作用
【发布时间】：2017-05-31 15:05:18
【问题描述】：

在 Angular 2 项目中，我安装了版本号为 0.5.0beta 的 html2canvas 模块。

然后在我的 TS 文件中，我将其导入为：

import html2canvas from 'html2canvas';

然后在我编写的 pdfDownload 方法中，

html2canvas (document.getElementById('exportthis'), {
                        onrendered : function (canvas) {

在这之后，当我执行npm start 命令时，我得到了类似的错误，

onrendered 不是 html2canvasOptions 中定义的属性。

谁能帮我解决这个问题？这是我第一次研究 angular 2 和 html2canvas。

【问题讨论】：

欢迎来到 Stack Overflow！请查看我们的SO Question Checklist，以帮助您提出一个好问题，从而得到一个好的答案。

标签： angular html2canvas

【解决方案1】：

可能你使用的是 html2canvas 0.5 版本。 onrendered 用于 0.4 及更早的版本。 html2canvas 0.5 被重写为使用Promises。你必须改变

html2canvas (document.getElementById('exportthis'), { onrendered : function (canvas) {

到

html2canvas(document.getElementById('exportthis')).then(function (canvas) {

【讨论】：

【解决方案2】：

我遇到了类似的问题。

我能够通过在html2canvas 函数调用之外声明选项对象来解决它。就像是。这可以防止 TS 编译器检查传递的内部选项对象。

var obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  }
};
  html2canvas(document.getElementById("exportthis"), obj);

编辑：
将 typescript 升级到 2.4.0 后，如果出现以下错误

TS2559: Type '{ onrendered: (canvas: any) => void; }' has no properties in common with type 'Html2CanvasOptions'.

然后添加任何 Html2CanvasOptions 属性，例如 logging: false

obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  },
  logging: false
};
  html2canvas(document.getElementById("exportthis"), obj);

【讨论】：

【解决方案3】：

newImg;
saveImage() {
html2canvas(document.getElementById('capture')).then((canvas) => {
  this.newImg = canvas.toDataURL("image/png")
})
}

<img [src]="newImg" alt="">

安装：

npm install @types/html2canvas --save

【讨论】：