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();
      });
  }

"elementsToScreenshot" 是一个 HTML 元素数组，它始终填充 HTML 渲染中找到的正确元素，如下所示：

0: div#main-screen-export-div.m-l-20.m-top-15.wrapper-comp
1: div#export-main-0.d-flex.w-100.ng-star-inserted
2: div#export-main-1.d-flex.w-100.ng-star-inserted
3: div#export-main-2.d-flex.w-100.ng-star-inserted

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

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

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

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

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

Answer 1

终于找到问题了

HTML 的嵌套如下所示：

<div data-html2canvas-ignore="true">
   <div>
      <div id="export-main-0"></div>
   </div>
</div>

问题是其中一个父 div 应用了 data-html2canvas-ignore 标签，这使得 html2canvas 无法检测到子 div。只需从父 div 中删除忽略规则即可使一切恢复正常。

Answer 2

如果要克隆节点并添加元素或样式，

像这样尝试 onclone：

html2canvas(elementById[index], {
    onclone: function (documentClone) {

        var headnode = document.createElement("h1");
        var textnode = document.createTextNode('Hello World');  
        headnode.appendChild(textnode);

        documentClone.querySelector('#list').prepend(headnode)
        (<HTMLElement>documentClone.querySelector('body')).style.padding = '30px';
      }
  }).then(canvas => {
     ...
})

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

HTML2Canvas: Unable to find element in cloned iframe

javascript

html2canvas

angular