1. 首页
  2. IT资讯

使用PowerBI_Embed实现Web访问报表 part 3

这是使用微软Power BI Embed功能,在自定义WEB应用中嵌入报表的系列入门指南。系列文章共分为三篇,这是第三篇。

获取嵌入PBI的参数

在自定义应用内访问PBIE,调用JavaScript API的过程中,需要三个参数,分别是

  • embedToken 嵌入令牌,用于鉴权
  • embedURL 报表的URL地址
  • reportId 报表的唯一标志

最重要的步骤是通过账户安全性认证,从 Azure AD 获取访问令牌和嵌入令牌,然后才能够调用API嵌入报表。目前微软提供了两种方式来获取Token,分别是 .Net SDK 和 REST接口。

本案例中使用Python调用REST接口来获取令牌(在实际生产环境中,建议使用其他更安全的方式来获取令牌),并构造三个参数,整个过程描述如下。

获取Access Token

def getAccessToken (username, password, clientId):     """     获取Access Token,这是下一步获取EmbedTokken的前提条件     :username Power BI Pro账户名称     :password Power BI Pro账户密码     :clientId 是在Azure中注册应用得到的"应用程序ID"     :return 字符串格式的AccessToken     """     url =  'https://login.microsoftonline.com/common/oauth2/token'      headers = { 'Content-Type' : 'application/x-www-form-urlencoded' }      body = {           'grant_type':'password',           'client_id': clientId,           'resource':'https://analysis.windows.net/powerbi/api',           'scope':'openid',           'username':username,           'password':password         }      response = requests.post(url=url, headers=headers, data=body)         return response.json()['access_token']    复制代码

获取Embed Token

def getEmbedToken(accessToken, groupId, reportId):     """     结合AccessToken,报表组ID,报表ID信息,获取EmbedToken     :accessToken 上一步得到的访问令牌     :groupId 报表组ID     :reportId 报表ID     :return 字符串格式的嵌入令牌     """     url = "https://api.powerbi.com/v1.0/myorg/groups/{0}/reports/{1}/GenerateToken"         .format(groupId, reportId)              headers = {         'Content-Type' : 'application/x-www-form-urlencoded',         'authorization' : "Bearer {0}".format(accessToken)     }          body = {'accessLevel':'View'}          response = requests.post(url=url, headers=headers, data=body)        return response.json()['token'] 复制代码

构造访问参数

def getPowerBIEmbedParam(username, password, clientId, groupId, reportId):     accessToken = getAccessToken(username, password, clientId)     embedToken = getEmbedToken(accessToken, groupId, reportId)     embedURL = "https://app.powerbi.com/reportEmbed?reportId={0}&groupId={1}".format(reportId, groupId)          print(embedToken)     print(embedURL)     print(reportId) 复制代码

获取报表信息

下面介绍如何获得报表组ID,报表ID。当我们发布一个报表之后,通过PBI门户来访问这个报表,在浏览器地址栏就可以看到这两个参数。如下图

生成三个参数

# 这三个参数是全局生效,不需要修改 username = 'bi***er@da*******ft.com' password = '******' clientId = 'c14***********************e7a9ef'  # 这三个参数是报表级别的 groupId = '7fd***********************d00b5' reportId = '4088***********************4a4e0'  getPowerBIEmbedParam(username, password, clientId, groupId, reportId) 复制代码

生成的三个参数片段如下

H4sIAAAAAAAEADVWNQ7****sCBa8y0-9kplWmsDMzM7M2G4zjfbu2xpp0Wfnnv3      https://app.powerbi.com/reportEmbed?reportId=40***4a4e0&groupId=7fd***b5      40******4a4e0 复制代码

自定义应用嵌入PBIE

微软在线演示工具

为了便于大家开发和测试,微软提供了一个,使用这个工具,我们可以直接填入三个参数测试报表,也可以把样例JS代码集成到自己的应用程序中。这里我们演示一下直接使用在线demo的方式。

如下图,在演示页面填入三个参数之后,点击【Run】即可显示嵌入报表。

JS – 调用PBIE

参考官方提供的样例和手册,我们很容易实现一个用JavaScript调用PBIE接口的应用。首先从获取SDK(powerbi.js),然后编写一个简单的html文件。

<html> <head>   <title>PBIE Test</title>   <meta charset="utf-8">    <script src="scripts/powerbi.js"></script> </head> <body>   <div id="captionArea">     <h1>Power BI Embed 测试</h1>   </div>   <button onclick="show_default()">展示默认报表</button>   <div id="embedContainer" style="height:90%">   </div>   <script>     // 用于访问PBIE的三个参数,仅供测试,正式环境下不能明文写在这里!!!     var txtAccessToken = 'H4sIAA***AAA==';     var txtEmbedUrl =     'https://app.powerbi.com/reportEmbed?reportId=40**0b5';     var txtEmbedReportId = '408**a4e0';            // 默认方式,不做特殊处理直接显示报表       function show_default () {       var models = window['powerbi-client'].models;       var permissions = models.Permissions.All;       var config = {         type: 'report',         tokenType: models.TokenType.Embed,         accessToken: txtAccessToken,         embedUrl: txtEmbedUrl,         id: txtEmbedReportId,         permissions: permissions,         settings: {           filterPaneEnabled: true,           navContentPaneEnabled: true         }       };         var embedContainer = document.getElementById('embedContainer');       var report = powerbi.embed(embedContainer, config);     }   </script> </body> </html> 复制代码

运行这个html文件的效果如下图,可以看到整个PBI报表被嵌入到自定义的网页中了。

JS – 设置过滤器

嵌入PBIE的一个常见场景是,根据当前登录人员对数据集进行过滤,实现行级别数据权限的控制。SDK中提供了设置全局过滤器的方法,和前面演示的代码相比,有两个变化

  • 创建一个filter对象,这里使用的是basic类型(这里没有演示的另一种过滤器是advanced类型,可以支持多个条件组合)
  • 在config中指定要使用这个filter对象

如下代码片段,我们对PBI模型中的人力成本表中的部门字段进行了筛选,可以简单的理解为在特定表上执行了一个过滤条件。

    // 对报表数据进行筛选之后再展示,可以用来控制行级别的数据权限       function show_pre_filter () {         // 设置一个过滤器 		const filter = { 		  $schema: "http://powerbi.com/product/schema#basic", 		  target: { 		    table: "人力成本", 		    column: "部门" 		  }, 		  operator: "In", 		  values: ["研发中心"] 		};              var models = window['powerbi-client'].models;       var permissions = models.Permissions.All;       var config = {         type: 'report',         tokenType: models.TokenType.Embed,         accessToken: txtAccessToken,         embedUrl: txtEmbedUrl,         id: txtEmbedReportId,         permissions: permissions,         // 使用过滤器           filters: [filter],         settings: {           filterPaneEnabled: true,           navContentPaneEnabled: true         }       };         var embedContainer = document.getElementById('embedContainer');       var report = powerbi.embed(embedContainer, config);     } 复制代码

运行这个带有前置过滤器的效果如下图,可以看到PBI报表中和部门相关的数据发生了变化。在岗人数这个指标从默认条件下的131变成了11。

总结

微软提供的PBIE功能,使我们可以用比较低的成本把Power BI报表集成到我们已有的Web应用中。采用这种方案的好处包括但不限于费用的降低(更详细的费用方案请参考本文末的参考资料定价部分),更灵活的权限处理方式,更炫酷的数据可视化效果,等等。

本文用一个简单常见的案例,从头到尾演示了采用PBIE集成方案的各个环节。因为篇幅和时间的原因,我们没有涉及到PBIE提供的更多复杂功能,这部分内容请参考官方文档资料。

参考资料

转载于:https://juejin.im/post/5b1f7c7b6fb9a01e6b2c1e77

发布了139 篇原创文章 · 获赞 145 · 访问量 18万+

原文始发于:

主题测试文章,只做测试使用。发布者:程序员,转转请注明出处:http://www.cxybcw.com/144790.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code