javascript - 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”是一个 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>

我的程序、跟踪器或其他第 3 方注入(inject)器(例如 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 中删除忽略规则即可使一切再次正常工作。