Power BI Embedded 开发提要

示例aaa前期工作aaa开发部署aaa结语aaa相关资料

DAVIS-BI

603人浏览 · 2021-02-02 00:02:36

DAVIS-BI · 2021-02-02 00:02:36 发布

注：本文最初发布于 d-bi.gitee.io, 2023年6月迁移至CSDN

本文主要讲解Power BI Embedded开发过程中的一些要点，包括文档中未明确提及的步骤，一些可能会遇到的BUG的解决方案，以及个别功能具体的实现方法。

请注意，这是一篇补充性文章，既然是“提要”，自然不会是Step-by-Step的教程，我建议读者已对Power BI Embedded有了初步的了解。跟随[官方文档](https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-sample-for-customers?tabs=net-framework)，并结合本文，相信能够帮助大家在开发过程中更加顺利，少走些弯路。文末还附上了相关教程链接，里面包含了更详尽的资料。

此外，以下所有内容均为“Embed for customers (App-owns-data)”, 如果是面向组织的嵌入式开发可参考此文档，然实际开发过程差异不大，本文亦可参考。

示例

首先，我强烈建议读者到此网站体验下官方做的示例，也可以直接谷歌“Power BI Embedded Playground”，里面提供了许多很酷的示例，还提供了教学文档和视频：

在这里插入图片描述

下图是本人开发的示例，包含如下功能：

报表选择
数据筛选
切换主题
RLS（基于角色的行级别安全性）
切换到编辑模式编辑&保存报表
显示&关闭书签
进入&退出全屏模式
页面刷新
查询最近一次数据刷新时间
执行数据刷新
切换到仪表板
仪表板显示模式
更多（…)

以上示例对于Power BI一般用户而言，功能已足够强大，但实际上能够实现的功能也远不止这些，此示例还仅仅是雏形，这意味着基于同样的技术实现原理，我们都可以实现许多完全超乎想象的功能，比如官方示例中弹出的具备发送邮件功能的自定义子菜单，以及自定义可视化分析等等。

该示例暂时部署于个人的本地服务器，因此你还无法访问它，后期会录制视频来展示各功能效果

现在，请跟随文档完成1到8步骤，并阅读以下提要。

前期工作提要

1.Power BI Embedded不是简单的iframe嵌入。你虽然可以简单地在PBI Service将报表发布到Web，然后在HTML页面里嵌入iframe，但这并非真正意义上的Power BI Embedded，因为你将不能控制权限，以及利用官方提供的强大的PBI JS库来实现丰富的交互功能等等。要实现这些效果，必须首先获取有效的嵌入令牌，这是前期工作的重点。

2.测试阶段，建议选择Master Account模式（PPU，Pro或Pro试用账户）。 Power BI Embedded拥有两种验证模式，Service Principal以及Master Account, 按官方说法，后者不能用于生产环境，且只能生成有限数量的嵌入令牌，但由于你可以使用该账户登录Power BI Service, 因此这能够方便开发者进行相关调试。Service Principal可以以用户身份加入安全组，以及在PBI工作区中指派权限（这是必要步骤，如图），但其本身不能登录到Service。

在这里插入图片描述

应用程序上线后，建议将验证方式改为Service Principal，使用该方式不需要在配置文件中提高账户和密码值，但需要提供Client Secret，这可以在Azure上创建并指定有效期：
在这里插入图片描述
此外，在PBI Service租户设置处启用“Allow service principals to use Power BI APIs”后（文档第6步），推荐将其应用到安全组中（安全组可由管理员在Azure创建）:

在这里插入图片描述

开发部署答疑

1.获取嵌入令牌失败

报错信息：401 Unanthorized: Error while retrieving Embed URL
在这里插入图片描述
解决方案：在Azure Portal为App添加Power BI Service权限

在这里插入图片描述
注：如果返回403 Forbidden，则需在PBI工作区追加App的权限（上文已有提及）

2.‘$’ 未定义

在这里插入图片描述
解决方法：不要使用IE浏览器，改用较新版本的Chrome，火狐或Edge浏览器，并在HTML中引入Jquery：

<script src="/scripts/jquery.js"></script>

3.Server Error in ‘/’ Application

在这里插入图片描述

解决方法：使用Package Manager安装.net包:

Install-Package Microsoft.Net.Compilers -Version 3.7.0-2.final

若问题依然存在，则需在IIS将其转为应用：在这里插入图片描述
4.powerbi is not defined

在这里插入图片描述
解决方法：将安装好的Powerbi.javascript包中的script文件夹复制到项目根目录

5.报表转换为编辑模式报错
在这里插入图片描述
解决方法：

//在Config追加
permissions: models.Permissions.All

ASP.NET

var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.View);

改为：

var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.Edit);

此处非常期待读者反馈您所遇到的问题，以及解决方案 (如果有) ，我会追加相关问题，以丰富这部分内容，帮助更多的人。

【附1】特定功能实现方式

Power BI Emdedded Playground的原代码有些较为复杂，不易懂，此处仅举例一二，一通百通

1.实现全屏

HTML

<button id="r_fullscreen" type="button" onclick="fullscreen()">全屏</button>

 function fullscreen() {
     var embedContainer = document.getElementById('embedDiv');
     report = powerbi.get(embedContainer);
     report.fullscreen();
     return;
 };

2.鼠标悬浮获取数据集最近一次更新时间

HTML

<button id="d_refresh" title="
            上次刷新开始时间: 
            <% = this.refresh_startTime %>
            上次刷新完成时间: 
            <% = this.refresh_endTime %>" 
type="button" onclick="refresh()">刷新数据</button>

ASP.NET

public string refresh_startTime;
public string refresh_endTime;
using (var client = new PowerBIClient(new Uri(Configurations.ApiUrl), Authentication.GetTokenCredentials()))
{
	var report = client.Reports.GetReportInGroup(Configurations.WorkspaceId, new Guid(ddlReport.SelectedValue));
	var refresh_history = client.Datasets.GetRefreshHistoryInGroup(Configurations.WorkspaceId,report.DatasetId);
	refresh_startTime = refresh_history.Value[0].StartTime.Value.ToString();
	refresh_endTime = refresh_history.Value[0].EndTime.Value.ToString();
}