为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

蝴蝶刀刀 2021-12-23 15:08:46
在我的程序中,我试图对某些页面进行 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
查看完整描述

2 回答

?
一只萌萌小番薯

TA贡献1795条经验 获得超7个赞

我最后发现了这个问题


HTML 的嵌套如下所示:


<div data-html2canvas-ignore="true">

   <div>

      <div id="export-main-0></div>

   </div>

</div>

问题是其中一个父 div 上应用了 data-html2canvas-ignore 标签,这使得 html2canvas 无法检测到子 div。简单地从父 div 中删除 ignore 规则,一切都会再次工作。


查看完整回答
反对 回复 2021-12-23
?
catspeake

TA贡献1111条经验 获得超0个赞

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


像这样尝试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 => {

     ...

})


查看完整回答
反对 回复 2021-12-23
  • 2 回答
  • 0 关注
  • 2189 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信