我正在尝试将Power BI报告嵌入到网页中的iFrame中。我有一个从Power BI Rest API,收集的报告列表,我想在同一页面上将报告动态加载到iFrame中。
唯一的问题是,我似乎找不到找出报告的宽度和高度的方法。
我有一个固定的框架,所以我想以某种方式计算所需的高度(但如果我能得到报告尺寸/比率,我可以计算出那部分)。
由于javascript跨域限制,我无法在加载后访问iFrame内容高度。
答案 0 :(得分:1)
我放入了我的项目代码。这里有一个div元素“ reportContainer”。 iframe的宽度和高度始终为100%,这无法管理。
您可以在容器div中添加高度和宽度。
<div id="reportContainer" hidden="hidden" style="height:85vh; width:85vw"></div>
@if (Model.ReportMode == Embed.Models.ReportMode.ExistingReport)
{
<script>
var embedReportId = "@Model.CurrentReport.EmbedConfig.Id";
var embedUrl = "@Html.Raw(Model.CurrentReport.EmbedConfig.EmbedUrl)";
var accessToken = "@Model.CurrentReport.EmbedConfig.EmbedToken.Token";
var reportContainer = document.getElementById('reportContainer');
// call embedReport utility function defined inside App.ts
PowerBIEmbedManager.embedReport(embedReportId, embedUrl, accessToken, reportContainer);
</script>
}
</div>
请查看渲染的图像。
答案 1 :(得分:1)
我喜欢使用javascript从iframe中删除样式,然后依靠CSS。
我嵌入了一个名为reportContainer的div
<div id="reportContainer"></div>
我使用此CSS来设置reportContainer div的样式
<style>
#reportContainer {
min-height: 800px;
min-width: 1330px;
}
</style>
我使用此JavaScript从iframe中删除“ style =“ width:100%; height:100%”样式属性,并将iframe的height和width属性设置为reportContainer div的高度和宽度。
<script>
// make this a function so you can pass in a DIV name to support the ability to have multiple reports on a page
function resizeIFrameToFitContent(iFrame) {
var reportContainer = document.getElementById('reportContainer');
iFrame.width = reportContainer.clientWidth;
iFrame.height = reportContainer.clientHeight;
console.log("hi");
}
window.addEventListener('DOMContentLoaded', function (e)
{
// powerbi.js doesnt give the embeeded iframe's an ID so we need to loop to find them.
// assuming the only iframes that should be on any of our pages is the one we are embedding.
var iframes = document.querySelectorAll("iframe");
for (var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent(iframes[i]);
// PowerBI JavaScript adds "width:100%;height:100%;" in the style attribute which causes sizing issues. We'll style it from JavaScript and CSS. So we'll strip the inline style attribute from the iFrame.
iframes[i].attributes.removeNamedItem("style");
//alert(iframes[i].parentNode.id); // gets the parent div containing the iFrame. Can use this to make sure were re-rizing the right iFrame if we have multiple reports on one page.
}
});
</script>
现在,您可以使用CSS轻松管理reportContainer div的大小。
不确定这是否是最好的方法,但对我来说效果很好。
享受。
答案 2 :(得分:0)
如果从其他域加载iFrame内容,则无法访问该内容。它不允许在浏览器中使用。如果您可以从代码所在的域加载内容,那么就可以完成。
答案 3 :(得分:0)
请尝试将以下代码添加到您的嵌入配置设置中
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
我希望这会有所帮助。