javascript - HTML2Canvas:在克隆的iframe中找不到元素

在我的程序中，我试图对某些页面进行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”是一个HTMLElements数组，始终在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>

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

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

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

最佳答案

我终于找到了问题

HTML的嵌套如下所示：

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

问题是父div之一上应用了data-html2canvas-ignore标记，这使得子div无法被html2canvas检测到。只需从父div删除ignore规则，一切就可以再次工作。

关于javascript - HTML2Canvas:在克隆的iframe中找不到元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58798256/