powerbi - 如何确定用于嵌入的 Power BI 报表的宽度和高度

Question

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

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

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

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

Answer 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 的高度和宽度属性设置为 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 的大小。

不确定这是否是最好的方法，但它对我来说效果很好。

享受。