如何确定Power BI报告的嵌入宽度和高度

时间:2017-06-12 20:57:02

标签: powerbi powerbi-embedded

我正在尝试将Power BI报告嵌入到网页中的iFrame中。我有一个从Power BI Rest API,收集的报告列表,我想在同一页面上将报告动态加载到iFrame中。

唯一的问题是,我似乎找不到找出报告的宽度和高度的方法。

我有一个固定的框架,所以我想以某种方式计算所需的高度(但如果我能得到报告尺寸/比率,我可以计算出那部分)。

由于javascript跨域限制,我无法在加载后访问iFrame内容高度。

4 个答案:

答案 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>

请查看渲染的图像。

enter image description here

答案 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
}

我希望这会有所帮助。