如何在单个网页中嵌入 2 个或更多 Power BI 报表？

Question

我有一个标准用户拥有的示例应用程序，它一次可以嵌入 1 个报告，但是，我需要在一个网页中嵌入 2 个或更多报告。如果有可以完成这项工作的示例解决方案文件，那就太好了。

Answer 1

要使用 JavaScript 客户端 embed Power BI 元素，您必须 configure the settings（要嵌入哪个报表/仪表板/磁贴、如何授权请求、什么查看模式、提供额外的过滤器等）然后调用 embed 方法传递配置和将加载嵌入元素的 <div> 元素。

此代码来自示例：

// ----------------------------------------------------------------------------
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
// ----------------------------------------------------------------------------

$(function () {
    var models = window["powerbi-client"].models;
    var reportContainer = $("#report-container").get(0);

    $.ajax({
        type: "GET",
        url: "/embedinfo/getembedinfo",
        success: function (data) {
            embedParams = $.parseJSON(data);
            reportLoadConfig = {
                type: "report",
                tokenType: models.TokenType.Embed,
                accessToken: embedParams.EmbedToken.Token,
                // You can embed different reports as per your need
                embedUrl: embedParams.EmbedReport[0].EmbedUrl,

                // Enable this setting to remove gray shoulders from embedded report
                // settings: {
                //     background: models.BackgroundType.Transparent
                // }
            };

            // Use the token expiry to regenerate Embed token for seamless end user experience
            // Refer https://aka.ms/RefreshEmbedToken
            tokenExpiry = embedParams.EmbedToken.Expiration;

            // Embed Power BI report when Access token and Embed URL are available
            var report = powerbi.embed(reportContainer, reportLoadConfig);

            // Clear any other loaded handler events
            report.off("loaded");

            // Triggers when a report schema is successfully loaded
            report.on("loaded", function () {
                console.log("Report load successful");
            });

            // Clear any other rendered handler events
            report.off("rendered");

            // Triggers when a report is successfully embedded in UI
            report.on("rendered", function () {
                console.log("Report render successful");
            });

            // Clear any other error handler events
            report.off("error");
            
            // Handle embed errors
            report.on("error", function (event) {
                var errorMsg = event.detail;
            
                // Use errorMsg variable to log error in any destination of choice
                console.error(errorMsg);
                return;
            });
        },
        error: function (err) {
            
            // Show error container
            var errorContainer = $(".error-container");
            $(".embed-container").hide();
            errorContainer.show();
            
            // Format error message
            var errMessageHtml = "<strong> Error Details: </strong> <br/>" + err.responseText;
            errMessageHtml = errMessageHtml.split("\n").join("<br/>");

            // Show error message on UI
            errorContainer.append(errMessageHtml);
        }
    });
});

所以要能够嵌入多个元素，你必须准备多个配置（参见示例代码中的reportLoadConfig），准备多个占位符（参见示例代码中的reportContainer）并多次调用powerbi.embed。

再次查看这篇文章 - Understanding the different embedding solutions。对于您的测试，您可以在 Power BI Playground 中使用developer sandbox。