html2canvas:未捕获错误（承诺）：[object undefined]角度6

我使用html2canvas将html转换为图像，然后导出为pdf文件。以下是我使用此软件包的步骤：

纱线添加html2canvas

添加将html转换为图像的代码

async export(comp, doc, save) {
  // create pdf file
  let height = REPORT_PAGE.top;
  const header = comp.reportHeader.nativeElement;
  const headerCanvas = await html2canvas(header, {svgRendering: true});
  height = REPORT_PAGE.top;
  let imgHeightHtml = REPORT_PAGE.header * REPORT_PAGE.width / headerCanvas.width;
  let contentDataURL = headerCanvas.toDataURL('image/png');
  doc.addImage(contentDataURL, 'PNG', REPORT_PAGE.left, height, REPORT_PAGE.width, imgHeightHtml);
  if (save) {
    doc.save('myreport.pdf');
  } else {
    doc.addPage();
  }
}

其中comp是角度分量，doc是jsPDF，save是布尔值。调用html2canvas时将引发以下错误

Uncaught (in promise): [object Undefined]
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4053)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
at ZoneTask.invoke (zone.js:485)

---

html2canvas是一个非常有用的包，但是这个错误非常糟糕。请帮助。

我也遇到了同样的问题，并得出结论认为这是一个bug。快速搜索后，我发现了以下线索：

…其中一个用户（adamszeibert）指出了负责的代码：

我发现在我的例子中，错误来自于在第572行附近定义的iframeLoader

我可以通过更改代码以返回Promise.resolve（克隆框架容器）来解决这个问题； 我很确定这个补丁会破坏很多其他的用例，但是对于我所需要的，它解决了这个问题

解决方案1： 截至今天，该解决方案有一个开放式请求：

解决方案2： 使用NgZone的跳动侧角法

第1步： 从角形核心导入NgZone：

import {NgZone} from '@angular/core';

第二步： 将ngZone添加到组件构造函数：

  constructor(
              ...
              ...
              private _ngZone: NgZone) {
                  ...
              }

第三步： 将html2canvas代码封装如下：

  public saveAsImage = () => {

    this._ngZone.runOutsideAngular(() => {

        html2canvas(document.getElementsByTagName('canvas')[0]).then(canvas => {
            let a = document.createElement('a');
            a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
            a.download = 'Some Filename.jpg';
            a.click();
          });
    });
  };

---

我也有同样的问题，这解决了它：

html2canvas(element, {
    ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
    }
}).then((canvas) => {
    ...
});

---

来源：

导出

是一个保留字，仅供参考。解决方案2不起作用。2.我将等待开放式PR合并到一个构建中。你有开放式PR的链接吗？这对我来说也是一个问题