javascript - PowerBI-Javascript嵌入式仪表板不可“单击”(以钻取到关联的报表等)

我有一个需要嵌入PowerBI仪表板的场景，需要执行以下操作：


使用ADAL.JS通过AD对浏览器用户进行身份验证；然后使用AD应用程序向powerbi App请求访问令牌。
将此访问令牌传递给PowerBI-Javascript（powerbi.embed），并将给定的仪表板嵌入到我的页面中。
此时，仪表板及其所有固定内容都显示在页面中。


但是，问题是，如果我尝试单击嵌入式仪表板上的任何固定项目，则什么也没有发生。相反，当我在powerbi.com上执行相同的操作时，底层报告将加载，并且出现“钻通”行为。

如何在嵌入式案例中实现相同类型的“钻通”行为？

最佳答案

这是为带有浏览器历史记录支持的嵌入式PowerBI仪表板实现点击功能的完整资源。

    <div id="pbiIframe" class="desktop-view" style="display: block;">
    <div class="reportContainer" id="topLevelContainer"></div>
</div>

    <script>
        var models = window['powerbi-client'].models;
        window.onpopstate = function (popstate) {
            console.log("popstate fired!");
            console.log(popstate);
            // check if popstate is available; this means user is hitting back button and
            // we need to load the associated powerbi artifact for that nav history
            if (popstate.state != null) {
                powerbi_embed(popstate.state.type, popstate.state.id, popstate.state.embedUrl,
                    popstate.state.viewMode, popstate.state.pageName);
            }
        };
        // I pass in a Model from MVC; if page is manually refreshed, load dash from Model always
        $(document).ready(function () {
            powerbi_embed('@Model.Type', '@Model.Id', '@Model.EmbedUrl', '@Model.ViewMode', "");
        })

        // Core helper to embed a powerbi artifact into the page dynamically
        function powerbi_embed(type, id, embedUrl, viewMode, pageName) {
            var retObj = null;

            ensureAuthorizationToPowerBI()
                .done(function (token) {
                    // create embed config
                    var embedConfig = {
                        type: type,
                        id: id,
                        embedUrl: embedUrl,
                        viewMode: models.ViewMode.View,
                        tokenType: models.TokenType.Aad,
                        accessToken: token,
                        pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                        pageName: pageName,

                        // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                        settings: {
                            filterPaneEnabled: true,
                            navContentPaneEnabled: true,
                            background: models.BackgroundType.Transparent,
                            // START Report specific settings
                            layoutType: models.LayoutType.Custom,
                            customLayout: {
                                displayOption: models.DisplayOption.FitToWidth
                            }
                            // END Report specific settings
                        }
                    }

                    // create new embed element (workaround due to errors from powerbi wrt embedding pbi into an already embedded element)
                    $('#topLevelContainer').html("");
                    var newEl = $("<div class='reportContainer'></div>");
                    $('#topLevelContainer').append(newEl);

                    // embed
                    retObj = powerbi.embed(newEl.get(0), embedConfig);

                    // store the CURRENT embedConfig in the page's popstate
                    history.replaceState(embedConfig, 'title');

                    /************ HANDLE CLICKTHRU SCENARIOS ****************/
                    // register for tileClicked event only for dashboards (reports are not clickable, and do not raise this event)
                    if (type === 'dashboard') {
                        retObj.on('tileClicked', function (event) {
                            console.log(event);
                            // in some cases, powerbi event does not contain a valid reportEmbedUrl
                            if (event.detail.reportEmbedUrl === "") {
                                console.log("reportEmbedUrl is empty in tileClicked event, no-oping. This happens for filtered links.")
                                return;
                            }

                            // preserve history so back nav works
                            console.log("tileClicked fired; save CURRENT powerbi state in popstate");
                            history.pushState(embedConfig, 'title');

                            powerbi_embed(
                                "report",
                                "", // can be left empty as reportId comes as part of reportEmbedUrl
                                event.detail.reportEmbedUrl,
                                models.ViewMode.View,
                                event.detail.pageName);
                        });
                    }
                });

            return retObj;
        }
    </script>