如何在ASP.NET MVC Web应用中显示Power BI报表服务器报表

1. 前置准备与权限配置 #

• 确保目标Power BI报表已发布至Power BI工作区。
• 在Azure AD中注册服务器端Web应用：
  • 获取应用的客户端ID和客户端密钥。
  • 为应用添加Power BI API权限（如Report.Read.All、Workspace.Read.All），并完成管理员同意授权。
  • 在Power BI工作区中，将该Azure AD应用添加为工作区成员（权限至少为参与者）。

2. 配置ASP.NET MVC项目 #

• 安装必要的NuGet包：Microsoft.PowerBI.Api（用于调用Power BI API）和Microsoft.Identity.Client（用于获取Azure AD令牌）。
• 在Web.config中添加配置项：

  <appSettings>
    <add key="PowerBI_ClientId" value="你的客户端ID" />
    <add key="PowerBI_ClientSecret" value="你的客户端密钥" />
    <add key="PowerBI_TenantId" value="你的Azure租户ID" />
    <add key="PowerBI_WorkspaceId" value="目标工作区ID" />
    <add key="PowerBI_ReportId" value="要嵌入的报表ID" />
  </appSettings>
  

3. 实现嵌入令牌获取服务 #

创建PowerBiService.cs类，封装令牌获取和报表嵌入逻辑：

using Microsoft.Identity.Client;
using Microsoft.PowerBI.Api;
using Microsoft.PowerBI.Api.Models;
using Microsoft.Rest;
using Microsoft.Extensions.Configuration;

public class PowerBiService
{
    private readonly string _clientId;
    private readonly string _clientSecret;
    private readonly string _tenantId;
    private readonly string _workspaceId;
    private readonly string _reportId;

    public PowerBiService(IConfiguration configuration)
    {
        _clientId = configuration["PowerBI_ClientId"];
        _clientSecret = configuration["PowerBI_ClientSecret"];
        _tenantId = configuration["PowerBI_TenantId"];
        _workspaceId = configuration["PowerBI_WorkspaceId"];
        _reportId = configuration["PowerBI_ReportId"];
    }

    public async Task<EmbedConfig> GetEmbedConfig()
    {
        // 获取Azure AD访问令牌
        var authority = $"https://login.microsoftonline.com/{_tenantId}";
        var confidentialClient = ConfidentialClientApplicationBuilder
            .Create(_clientId)
            .WithClientSecret(_clientSecret)
            .WithAuthority(new Uri(authority))
            .Build();

        var scopes = new[] { "https://analysis.windows.net/powerbi/api/.default" };
        var authResult = await confidentialClient.AcquireTokenForClient(scopes).ExecuteAsync();

        // 初始化Power BI客户端
        using var powerBiClient = new PowerBIClient(
            new Uri("https://api.powerbi.com/"), 
            new TokenCredentials(authResult.AccessToken));

        // 获取报表信息
        var report = await powerBiClient.Reports.GetReportInGroupAsync(_workspaceId, _reportId);

        // 生成嵌入令牌
        var tokenRequest = new GenerateTokenRequest(accessLevel: "View");
        var embedToken = await powerBiClient.Reports.GenerateTokenAsync(_workspaceId, _reportId, tokenRequest);

        return new EmbedConfig
        {
            ReportId = report.Id,
            EmbedUrl = report.EmbedUrl,
            EmbedToken = embedToken.Token,
            ReportName = report.Name
        };
    }
}

public class EmbedConfig
{
    public string ReportId { get; set; }
    public string EmbedUrl { get; set; }
    public string EmbedToken { get; set; }
    public string ReportName { get; set; }
}

4. MVC控制器与视图实现 #

• 控制器中注入服务并传递嵌入配置到视图：

public class HomeController : Controller
{
    private readonly PowerBiService _powerBiService;

    public HomeController(PowerBiService powerBiService)
    {
        _powerBiService = powerBiService;
    }

    public async Task<ActionResult> EmbeddedReport()
    {
        var embedConfig = await _powerBiService.GetEmbedConfig();
        return View(embedConfig);
    }
}

• 创建EmbeddedReport.cshtml视图，使用Power BI JS SDK嵌入报表：

@{
    ViewBag.Title = "嵌入Power BI报表";
}

<h3>@Model.ReportName</h3>
<div id="reportContainer" style="width: 100%; height: 700px;"></div>

<!-- 引入Power BI JavaScript SDK -->
<script src="https://microsoft.github.io/PowerBI-JavaScript/dist/powerbi.min.js"></script>
<script>
    // 嵌入配置
    var embedConfiguration = {
        type: 'report',
        id: '@Model.ReportId',
        embedUrl: '@Model.EmbedUrl',
        accessToken: '@Model.EmbedToken',
        settings: {
            panes: {
                filters: { visible: false },
                pageNavigation: { visible: true }
            }
        }
    };

    // 嵌入报表
    var container = document.getElementById('reportContainer');
    var report = powerbi.embed(container, embedConfiguration);

    // 监听加载事件
    report.on('loaded', () => {
        console.log('报表加载完成');
    });

    // 监听错误事件
    report.on('error', (event) => {
        console.error('报表加载出错:', event.detail);
    });
</script>

5. 测试与问题排查 #

• 启动应用访问/Home/EmbeddedReport，检查报表是否正常显示。
• 若出现权限错误：确认Azure AD应用权限已完成管理员同意，且已添加为Power BI工作区成员。
• 若报表无法加载：检查浏览器控制台错误信息，验证嵌入令牌、报表ID、工作区ID是否正确。

内容的提问来源于stack exchange，提问作者hanan