2024-03-28 15:35:10 / 8
一、开发准备
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