How to determine a Power BI report's width and height for embedding

Question

I am trying to embed a Power BI report into an iFrame in a web page. I have a list of reports gathered from the Power BI Rest API, and I would like to dynamically load the reports into an iFrame on the same page.

Only problem is, I can't seem to find a way to figure out the report's width and height.

I have a fixed with frame, so I'd like to calculate the needed height somehow (though if I can get the report dimensions / ratios I can figure that part out).

I can't access the iFrame content height after load due to javascript cross-domain restrictions.

Answer 1

please try adding the code below to your embed config settings

settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
 displayOption: models.DisplayOption.FitToPage
}

I hope this helps.

Answer 2

I put my project code. here have a div element "reportContainer". Iframe width & height always 100% and this not manageable .

you can add height and width into 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 rendered image.

Answer 3

I like to remove the styling from the iframe using javascript and then rely on css.

I embed into a div called reportContainer

<div id="reportContainer"></div>

I use this CSS to style the reportContainer div

<style>
    #reportContainer {
        min-height: 800px;
        min-width: 1330px;
    }
</style>

I use this javascript to remove the "style="width:100%;height:100%" style attribute from the iframe and set the iframe height and width attributes to the height and width of the 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>

Now you can easily manage the size of the reportContainer div using CSS.

Not sure if this is the best approach but it has worked well for me.

Enjoy.

Answer 4

You can't access iFrame content if it's loading from another domain. It's not allowed in browsers. If you can load the content from the domain where your code is located then it can be done.