HTML2Canvas：无法在克隆的 iframe 中找到元素

Question

在我的程序中，我试图对某些页面进行 PDF 导出，但是当 HTML2Canvas 尝试处理我拥有的元素时遇到以下错误：

无法在克隆的 iframe 中找到元素

而仅此而已。这是我使用的代码：

public exportToPdf(

    selectedFilter: SelectedFilter,

    currentTime: string,

    idOfExportDiv: string[]

  ): void {

    this.addClassToMainDiv();

    const elementsToScreenshot: HTMLElement[] = [];

    for (let index = 0; index < idOfExportDiv.length; index++) {

      elementsToScreenshot.push(document.getElementById(idOfExportDiv[index]));

    }

    const fileName = 'export-' + currentTime + '.pdf';

    this.download(elementsToScreenshot, fileName, selectedFilter, currentTime);

  }

以及下载功能：

  download(elementById: HTMLElement[], name, selectedFilter: SelectedFilter, currentTime: string) {

    const html2canvasPromises: Promise<unknown>[] = [];

    for (let index = 0; index < elementById.length; index++) {

      html2canvasPromises.push(

        html2canvas(elementById[index], {

          useCORS: true

        }).then(canvas => {

          const image = canvas.toDataURL();

          const imagePromise = this.addImage(image);

          return imagePromise;

        })

      );

    }

    Promise.all(html2canvasPromises)

      .then(content => {

        this.removeClassFromMainDiv();

        this.downloadPdf(selectedFilter, currentTime, name, content);

        this.pdfCreated.next(true);

        this.loadingSpinnerService.close();

      })

      .catch(error => {

        console.error('Image conversion error', 'Failed to screenshot and download provided elements', {

          error: error

        });

        this.removeClassFromMainDiv();

        this.pdfCreated.next(true);

        this.loadingSpinnerService.close();

      });

  }

由于我使用 Angular 并且我需要一些动态设置的 id，1,2 和 3 div 的 id 在 HTML 中设置如下：

<div [id]="'export-main-' + index"></div>

我的程序、跟踪器或其他 3rd 方注入器（如谷歌广告）中没有 iframe，有没有其他人以前遇到过这个问题并且知道如何解决它？

编辑：也许这证明是有帮助的。这是错误可能触发的文件，因为我在那里发现了这个确切的错误：

https://github.com/niklasvh/html2canvas/blob/master/src/index.ts

Answer 1

我最后发现了这个问题HTML 的嵌套如下所示：<div data-html2canvas-ignore="true">&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; <div id="export-main-0></div>&nbsp; &nbsp;</div></div>问题是其中一个父 div 上应用了 data-html2canvas-ignore 标签，这使得 html2canvas 无法检测到子 div。简单地从父 div 中删除 ignore 规则，一切都会再次工作。

Answer 2

如果要克隆节点并添加元素或样式，像这样尝试onclone：html2canvas(elementById[index], {&nbsp; &nbsp; onclone: function (documentClone) {&nbsp; &nbsp; &nbsp; &nbsp; var headnode = document.createElement("h1");&nbsp; &nbsp; &nbsp; &nbsp; var textnode = document.createTextNode('Hello World');&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; headnode.appendChild(textnode);&nbsp; &nbsp; &nbsp; &nbsp; documentClone.querySelector('#list').prepend(headnode)&nbsp; &nbsp; &nbsp; &nbsp; (<HTMLElement>documentClone.querySelector('body')).style.padding = '30px';&nbsp; &nbsp; &nbsp; }&nbsp; }).then(canvas => {&nbsp; &nbsp; &nbsp;...})