拍摄包含iframe的页面的屏幕截图 [英] Take screenshot of a page containing an iframe

问题描述

我们有一个nodeJS/angular 4网站，该网站显示来自第三方的iframe(powerBI Emebdded).我们正在尝试开发一项功能，以允许最终用户对页面进行截图，包括iframe的内容.

We have a nodeJS/angular 4 website which is displaying an iframe from a third party (powerBI Emebdded). We are trying to get develop a feature allowing the end user to take a screenshot of the page including the content of the iframe.

我们尝试了iframe2image库: https://github.com/twolfson/iframe2image

We tried the iframe2image library: https://github.com/twolfson/iframe2image

但是我们面临着相同原产地政策的问题:

But we are facing the issue of the same origin policy:

ERROR DOMException: Blocked a frame with origin http://localhost:4200
from accessing a cross-origin frame

由于我们无权访问iframe(这是PowerBI iframe生成的带有专用库的第三方内容). 我们无法通过将iframe中的window.document.domain设置为相同的域来绕过该策略.

As we have no access to the iframe (it's a third party content generated by PowerBI iframe with a dedicated library). We can not bypass the policy by setting the window.document.domain in the iframe to the same domain.

您有建议我们的解决方案吗?

Do you have a solution to suggest us?

推荐答案

我认为这是绝对不可能的，因为无法访问iframe文档的元素. 但是必须访问此元素，因为所有将html呈现为任何形式的图像的库都需要解析文档中的Elements才能获得视觉效果.

I think this is absolutely not possible, because there is no way to access the elements of the iframe's document. But access to this elements is necessary because all libraries which are rendering html to any form of image need to resolve the Elements inside the document to get the visuals out of it.

这篇关于拍摄包含iframe的页面的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！