Power Bi：在单个 HTML 页面中呈现报告

Question

我正在使用 HTML 的以下代码（渲染部分）方法在我的网页上渲染多个 Power Bi 报表。

调试后我发现代码工作正常，结果存储不同的 ID、嵌入 URL 和相应报告的 URL。但是在网页上加载后，我得到了一个 Power Bi 加载符号，之后所有的图块都显示了最后的报告。磁贴没有显示不同的报告，尽管的报告不同。

这是代码（代码可以很好地存储所有不同的报告），但是当网页上加载 Power Bi 引擎时，我只得到所有图块中的最后一个报告：

控制器：

public class TelemetryController : Controller
{
    private string workspaceCollection;
    private Guid workspaceId;
    private string signingKey;
    private string apiUrl;
    public TelemetryReports telemetryreport;

    public TelemetryController()
    {
        this.workspaceCollection = ConfigurationManager.AppSettings["powerbi:WorkspaceCollection"];
        this.workspaceId = Guid.Parse(ConfigurationManager.AppSettings["powerbi:WorkspaceId"]);
        this.signingKey = ConfigurationManager.AppSettings["powerbi:SigningKey"];
        this.apiUrl = ConfigurationManager.AppSettings["powerbi:ApiUrl"];
    }
    // GET: Telemetry


    public ActionResult TelemetryIndex()
    {
        var authResponse = new SecurityHelper().Authenticate(new AuthenticateRequest() { IsNonMRT = false, isOnLoad = true });
        telemetryreport = new TelemetryReports();

        if (!authResponse.IsAuthenticated)
            throw new NotAuthorizedException((String.Format(ResourceMessages.GetErrorMessage("REW_ERR_0005"), authResponse.context.LoggedInAlias)) + ";" + ((int)PAFEventID.REW_ERR_0005).ToString());
        var devToken = PowerBIToken.CreateDevToken(this.workspaceCollection, this.workspaceId.ToString());
        using (var client = this.CreatePowerBIClient(devToken))
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId.ToString());

            foreach (var item in reportsResponse.Value)
            {
                var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId.ToString(), Guid.Parse(item.Id).ToString());
                TelemetryReports.ReportViewModel _report = new TelemetryReports.ReportViewModel()
                {
                    Report = item,
                    AccessToken = embedToken.Generate(this.signingKey)
                };
                telemetryreport.Reports.Add(_report);
            }
        }
        return View(telemetryreport);
    }

    [ChildActionOnly]
    public ActionResult Reports()
    {
        var devToken = PowerBIToken.CreateDevToken(this.workspaceCollection, this.workspaceId.ToString());
        using (var client = this.CreatePowerBIClient(devToken))
        {
            var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId.ToString());

            var viewModel = new TelemetryReports.ReportsViewModel
            {
                Reports = reportsResponse.Value.ToList()
            };

            return PartialView(viewModel);
        }
    }

    public async Task<ActionResult> Report(string reportId)
    {
        var devToken = PowerBIToken.CreateDevToken(this.workspaceCollection, this.workspaceId.ToString());
        using (var client = this.CreatePowerBIClient(devToken))
        {
            var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId.ToString());
            var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
            var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId.ToString(), report.Id);

            var viewModel = new TelemetryReports.ReportViewModel
            {
                Report = report,
                AccessToken = embedToken.Generate(this.signingKey)
            };

            return View(viewModel);
        }
    }


    private IPowerBIClient CreatePowerBIClient(PowerBIToken token)
    {
        var jwt = token.Generate(signingKey);
        var credentials = new TokenCredentials(jwt, "AppToken");
        var client = new PowerBIClient(credentials)
        {
            BaseUri = new Uri(apiUrl)
        };

        return client;
    }
}

TelemetryReport.cs（调试需要）

 public class TelemetryReports
        {
            public TelemetryReports() {
                Reports = new List<ReportViewModel>();
            }
            public List<ReportViewModel> Reports { get; set; }

        public class ReportsViewModel
        {
            public List<Report> Reports { get; set; }
        }

        public class ReportViewModel
        {
            public IReport Report { get; set; }

            public string AccessToken { get; set; }
        }
    }
    public class TelemetryReport
    {
        public IReport Report { get; set; }

        public string AccessToken { get; set; }
    }

Index.HTML 文件:

<!DOCTYPE html>
    <html lang="en">
    <head>
        @Styles.Render("~/Content/telemetry")

        @{
            Layout = null;
        }
        @model TelemetryReports
        <script type="text/javascript" src="/js/app.js"></script>
        <script src="~/Scripts/app/powerbi.js"></script>
        <script src="~/Scripts/lib/chart.js"></script>
        <script src="~/Scripts/lib/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/lib/bootstrap.min.js"></script>
    </head>
    <body>
        <section>
            <nav class="cl-effect-1" style="background-color:transparent">
                <a class="fifth before after" href="/">Home</a>
            </nav>
        </section>
        <br />

        <div class="TelemetryReport">
            @for (int i = 0; i < Model.Reports.Count; i++)
            {
                @Html.Partial("Report", Model.Reports[i])
            }
        </div>


    </body>
    </html>

Report.HTML:

@using Microsoft.PowerBI.AspNet.Mvc;

@{
    Layout = "";
}
@model TelemetryReports.ReportViewModel
<body>

    <section class="color-9">
        <nav class="cl-effect-13">
            <div class="active">@Model.Report.Name</div>
        </nav>
    </section>
    @Html.PowerBIAccessToken(Model.AccessToken)
        @Html.PowerBIReport(Model.Report.Name, Model.Report.EmbedUrl, new { style = "height:35vh" })

    @*<div>
        @Html.PowerBIAccessToken(Model.AccessToken)
        @Html.PowerBIReport(Model.Report.Name,Model.Report.EmbedUrl, new { style = "height:85vh ; width:65vh;" })
    </div>*@

</body>

最终网页如下所示：

Answer 1

您遇到此问题是因为您使用的是全局 @Html.PowerBIAccessToken(Model.AccessToken) HTML 助手。

这对于单个报告来说工作正常，但在幕后所做的一切都是写出一个全局 JavaScript 变量，该变量每次都会被覆盖，因此列出的最后一个报告获胜。处理多个报告时，您需要将访问令牌作为属性传递给您要嵌入的每个报告。

您需要做一些不同的事情：

为每个报告创建一个嵌入令牌
将生成的令牌作为自定义属性传递到每个嵌入的报告中

@Html.PowerBIReport(Model.Report.Name,Model.Report.EmbedUrl, new { @powerbi_access_token = Model.AccessToken })

ASP.NET MVC HTML 助手在幕后使用 JavaScript SDK。您可以在 Power BI JavaScript SDK on GitHub.

上找到有关 JavaScript SDK 的更多信息

Power Bi：在单个 HTML 页面中呈现报告

Power Bi : Rendering Report in a single HTML page

html

c#

webpage

powerbi

powerbi-embedded