如何 Web 基础嵌入 Power BI 报表?

2024-03-28 15:35:10 / 8

Power BI

一、开发准备

1 工具准备

(1)Postman:https://www.postman.com/       下载,邮箱并注册。作为 api 测试

2 Power BI 使用文档

(1)服务端 REST APIs:https://learn.microsoft.com/zh-cn/rest/api/power-bi/    服务端请求获取数据

(2)客户端 javascription : https://learn.microsoft.com/zh-cn/javascript/api/overview/powerbi/    前端拿到token 渲染 report 加载界面

二、嵌入报表

1 服务端

(1)获取token

Post https://login.microsoftonline.com/organizations/oauth2/v2.0/token

client_id:xxxxxxxxxxx
client_info:1
scope:openid offline_access profile https://analysis.windows.net/powerbi/api/.default
grant_type:password
username:xxxxxxxxxxxxxxxxxx@xxxxxxxxx.com
password:*******************

拿到:access_token

(2)请求获取报表信息

REST APIs document: https://learn.microsoft.com/zh-cn/rest/api/power-bi/reports/get-report-in-group

GET https://api.powerbi.com/v1.0/myorg/groups/f089354e-8366-4e18-aea3-4cb4a3a50b48/reports/5b218778-e7a5-4d73-8187-f10824047715

// Sample response :
{
  "datasetId": "cfafbeb1-8037-4d0c-896e-a46fb27ff229",
  "id": "5b218778-e7a5-4d73-8187-f10824047715",
  "name": "SalesMarketing",
  "webUrl": "https://app.powerbi.com/groups/f089354e-8366-4e18-aea3-4cb4a3a50b48/reports/5b218778-e7a5-4d73-8187-f10824047715",
  "embedUrl": "https://app.powerbi.com/reportEmbed?reportId=5b218778-e7a5-4d73-8187-f10824047715&groupId=f089354e-8366-4e18-aea3-4cb4a3a50b48"
}

2 客户端

(1) 嵌入 js 下载并引入

https://github.com/microsoft/PowerBI-JavaScript/

在你的html 页面 引入

<script src="/powerbi-client/dist/powerbi.js"></script>

(2) js 加载服务端数据渲染报表

html代码

<div id="embedContainer" ></div>

js 代码

// Set up the configuration object that determines what to embed and how to embed it.
var models = window['powerbi-client'].models;
let embedConfiguration = {
    accessToken: anAccessToken, // 服务端 access_token
    embedUrl: anEmbedUrl,  // 服务端 报表 embed_url
    id: aReportId,  // 服务端 report id
    permissions: models.Permissions.All, // 默认
    tokenType: aTokenType,  // models.TokenType.Aad 或 models.TokenType.Embed
    type: 'report'
};
 
// Get a reference to the HTML element that contains the embedded report.
let embedContainer = $('#embedContainer')[0]; 
 
// Embed the report.
let report = powerbi.embed(embedContainer, embedConfiguration);

其他参数请参考: https://learn.microsoft.com/zh-cn/javascript/api/overview/powerbi/embed-report

壹凯

529988248@qq.com
77365705