HTML2Canvas:无法在克隆的 iframe 中找到元素
HTML2Canvas: Unable to find element in cloned 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" 是一个 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
终于找到问题了
HTML 的嵌套如下所示:
<div data-html2canvas-ignore="true">
<div>
<div id="export-main-0"></div>
</div>
</div>
问题是其中一个父 div 应用了 data-html2canvas-ignore 标签,这使得 html2canvas 无法检测到子 div。只需从父 div 中删除忽略规则即可使一切恢复正常。
如果要克隆节点并添加元素或样式,
像这样尝试 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 => {
...
})
在我的程序中,我尝试对某些页面进行 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
终于找到问题了
HTML 的嵌套如下所示:
<div data-html2canvas-ignore="true">
<div>
<div id="export-main-0"></div>
</div>
</div>
问题是其中一个父 div 应用了 data-html2canvas-ignore 标签,这使得 html2canvas 无法检测到子 div。只需从父 div 中删除忽略规则即可使一切恢复正常。
如果要克隆节点并添加元素或样式,
像这样尝试 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 => {
...
})