Power BI 报表服务器本地部署后，如何优雅地将报表嵌入到网页中？

最新推荐文章于 2024-09-29 18:08:15 发布

cda2024

最新推荐文章于 2024-09-29 18:08:15 发布

阅读量806

点赞数 9

文章标签：服务器运维

本文链接：https://blog.csdn.net/cda2024/article/details/142640234

版权

在一个信息爆炸的时代，数据可视化已经成为企业和组织不可或缺的一部分。而Power BI作为微软推出的一款强大的商业智能工具，凭借其直观的操作界面和丰富的可视化组件，在数据分析师和业务人员中获得了广泛的认可。特别是在企业内部，越来越多的企业选择将Power BI报表服务器进行本地部署，以更好地保护敏感数据，并根据自身需求定制化服务。

但是，问题也随之而来——在完成本地部署之后，我们能否将Power BI生成的精美报表嵌入到自己的网页应用中呢？答案是肯定的。本文就将详细探讨这一过程，帮助你掌握从本地部署到最终嵌入的全部步骤与技巧。

一、准备工作

环境配置

硬件环境：服务器硬件性能应满足Power BI Report Server的最低要求，建议配置较高规格的服务器，以便于处理复杂的数据集和保证用户体验。
软件环境：
- 操作系统：Windows Server 2016 或更高版本；
- SQL Server 2017 或更高版本（用于存储报表数据）；
- Power BI Report Server安装包及其依赖项。

安装部署

下载最新版Power BI Report Server安装程序，并按照官方文档指示完成安装。
配置数据库连接：使用SQL Server Management Studio创建一个新的数据库，并将其设置为Power BI Report Server的默认数据库。
启动服务并登录管理界面进行初始设置，包括管理员账户密码设定、邮件通知配置等。

二、开发环境搭建

为了能够顺利地将Power BI报表嵌入到Web应用程序中，我们需要准备以下工具：

Visual Studio 2019 或更高版本（推荐使用社区版）
.NET Core SDK
Node.js 和 npm
Git （可选）

此外，还需要了解一些前端技术栈知识，比如HTML、CSS、JavaScript以及React框架（如果你打算采用React作为前端开发框架的话）。

三、获取Power BI API密钥

为了让Web应用能够访问到Power BI报表资源，我们需要先通过Microsoft Azure Active Directory (Azure AD) 获取API密钥。具体操作步骤如下：

注册或登录至Azure门户（https://portal.azure.com/）。
创建一个新应用注册，并记录下客户端ID和目录（租户）ID。
授权该应用对Power BI Service API的访问权限，通常情况下至少需要“Report.Read.All”和“Report.ReadWrite.All”两个范围权限。
生成客户端机密或证书用于身份验证。
使用这些凭据来请求访问令牌，该令牌将用于后续的所有API调用。

四、嵌入Power BI报表

基础概念

嵌入类型

Power BI提供了两种不同的嵌入方式：

只读模式：用户只能查看报表内容但无法进行任何编辑操作；
交互式模式：除了查看外，还允许用户与报表进行交互，如切换页面、修改筛选条件等。

根据实际需求选择合适的嵌入类型至关重要。

嵌入令牌

无论采用哪种嵌入方式，都必须先生成一个嵌入令牌。该令牌包含了访问特定资源所需的权限信息，并且具有一定有效期。对于本地部署场景而言，我们通常会使用系统生成器（System Assign Managed Identity）来动态生成嵌入令牌，从而避免将敏感信息硬编码进代码中。

实现过程

创建报表

首先需要在Power BI Desktop中设计好报表，并将其发布到本地部署的Power BI Report Server上。确保该报表已被正确授权给目标用户或角色。

编写代码

接下来就可以开始编写嵌入代码了。这里我们假设使用的是ASP.NET Core MVC作为后端框架，并结合React构建前端页面。

后端逻辑

public async Task<IActionResult> GetEmbedToken(string reportId)
{
    var clientId = "<your-client-id>";
    var clientSecret = "<your-client-secret>";
    var tenantId = "<your-tenant-id>";
    
    // 1. Request an access token from Azure AD
    var accessToken = await RequestAccessToken(clientId, clientSecret, tenantId);

    // 2. Use the access token to request an embed token for the specified report
    var embedToken = await RequestEmbedToken(accessToken, reportId);

    return Ok(embedToken);
}

上述代码片段展示了如何在后端生成嵌入令牌的过程。其中RequestAccessToken()函数负责向Azure AD申请访问令牌，而RequestEmbedToken()则利用该令牌调用Power BI REST API生成嵌入令牌。

前端展示

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const EmbedReport = ({ reportId }) => {
    const [embedUrl, setEmbedUrl] = useState('');
    const [embedToken, setEmbedToken] = useState('');

    useEffect(() => {
        (async () => {
            try {
                const response = await axios.get(`/api/Embed/GetEmbedToken?reportId=${reportId}`);
                setEmbedToken(response.data.token);
                setEmbedUrl(`https://app.powerbi.com/reportEmbed?reportId=${reportId}&token=${encodeURIComponent(response.data.token)}`);
            } catch (error) {
                console.error('Failed to fetch embed token:', error);
            }
        })();
    }, [reportId]);

    return (
        <div>
            <iframe src={embedUrl} width="100%" height="600px" frameBorder="0" allowFullScreen title="Embedded Report"></iframe>
        </div>
    );
};

export default EmbedReport;

React组件EmbedReport接收一个reportId参数，并通过调用后端API获取嵌入令牌及URL，然后将其渲染到一个<iframe>元素中。注意这里的URL构造方式，它遵循了Power BI提供的标准格式。