How to determine the width and height of the BI BI report for embedding
I am trying to embed a Power BI report in an iFrame on a webpage. I have a list of reports collected from the Power BI Rest API and I would like to dynamically load reports in an iFrame on the same page,
The only problem is that I cannot find a way to determine the width and height of the report.
I have a fixed frame so I would like to calculate the required height somehow (although if I can get the dimensions / ratios of the report I can figure out which part).
I am unable to access the height of the iFrame content after loading due to javascript cross-domain restrictions.
source to share
I have supplied my project code. there is a "reportContainer" div element here. The width and height of the iframe are always 100% and this is not possible.
You can add height and width to the container 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>
please see the picture.
source to share
I like to remove styles from an iframe using javascript and then rely on css.
I am embedding in a div called reportContainer
<div id="reportContainer"></div>
I am using this CSS to style the reportContainer div
<style>
#reportContainer {
min-height: 800px;
min-width: 1330px;
}
</style>
I am using this javascript to remove the style attribute "style =" width: 100%; height: 100% "from the iframe and replace the height and width of the iframe with my css from the #reportContainer definitions from the style tags set the actual reportContainer div to the Height and c too.
<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 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>
Now you can easily control the size of the reportContainer div with CSS.
Not sure if this is the best approach, but it worked well for me.
Enjoy.
source to share