如何在嵌入视图中创建和编辑报表
Embed Token
创建报表所需相关的访问Token
Token具有以下作用范围:Dataset.Read Workspace.Report.Create
使用JS创建一个新的空白报表
var embedCreateConfiguration = {
accessToken: 'eyJ0eXAiO...Qron7qYpY9MI',
embedUrl: 'https://embedded.powerbi.com/ReportEmbed',
datasetId: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
};
// 获取div元素
var reportContainer = $('#reportContainer')[0];
// 创建报表
var report = powerbi.createReport(reportContainer, embedCreateConfiguration);
保存报表
除非调用另存为操作,否则不会创建该报表,可以通过文件菜单或者JS来完成
var saveAsParameters = {
name: "newReport"
};
// SaveAs report
report.saveAs(saveAsParameters);
important
仅在保存后才会创建此报表,保存后仍会以编辑模式显示数据集,而不是报表。需要重新加载新的报表
加载新的报表
为了与新报表交互,需要做嵌入,所以需要 新的token,然后调用embed方法
var embedConfiguration = {
accessToken: 'eyJ0eXAiO...Qron7qYpY9MJ',
embedUrl: 'https://embedded.powerbi.com/ReportEmbed',
reportId: '5dac7a4a-4452-46b3-99f6-a25915e0fe54',
viewMode: 'edit'
};
var reportContainer = $('#reportContainer')[0];
var report = powerbi.embed(reportContainer, embedConfiguration);
可使用“saved”事件自动保存和加载报表
实现自动触发saveAs然后加载报表,可以用saved事件
保存操作完成后会触发此事件,并且该事件会返回一个Json对象,其中包括新的reportId,reportName,以及操作是saveAs还是save
{
"reportObjectId": "5dac7a4a-4452-46b3-99f6-a25915e0fe54",
"reportName": "newReport",
"saveAs": true,
"originalReportObjectId": null
}
保存操作完成后触发的事件
<div id="reportContainer"></div>
<script>
var embedCreateConfiguration = {
accessToken: 'eyJ0eXAiO...Qron7qYpY9MI',
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed',
datasetId: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
};
var reportContainer = $('#reportContainer')[0];
var report = powerbi.createReport(reportContainer, embedCreateConfiguration);
var saveAsParameters = {
name: "newReport"
};
// SaveAs report
report.saveAs(saveAsParameters);
// report.on will add an event handler which prints to Log window.
report.on("saved", function(event) {
// get new Token
var newReportId = event.detail.reportObjectId;
// create new Token. This is a function that the application should provide
var newToken = createAccessToken(newReportId,scopes /*provide the wanted scopes*/);
var embedConfiguration = {
accessToken: newToken ,
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed',
reportId: newReportId,
};
// Embed report
var report = powerbi.embed(reportContainer, embedConfiguration);
// report.off removes a given event handler if it exists.
report.off("saved");
});
</script>
Save Report
可以调用report.save()来保存用户的更改
await report.save();
检查报表是否保存
可以调用report.isSaved()来检查报表是否已经保存,可以避免客户丢失为保存的更改
bool isSaved = await report.isSaved();
Service Details
2.0版本以后,PBI不会在页面加载时自动在程序的DOM中搜索PBI嵌入的组建,需要做一些配置
1,如果在DOM渲染之前执行,可运行以下代码来设置DOM ready事件监听器,它将调用powerbi.init()
powerbi.enableAutoEmbed();
如果在DOM渲染之后执行可以调用:
powerbi.init();
这波操作会搜索具有powerbi-embed-url属性的元素,并嵌入
引用现有给定元素的PBI组件
var report = powerbi.get(element);
通过唯一的ID或name查找做嵌入
var report = powerbi.find('customReportName');
重置
如果想将已经嵌入元素的报表重置为初始状态,则调用powerbi.reset(element);
此方法会从service中删除嵌入并删除iframe,一般需要在父元素从DOM中移除所包含元素之前调用reset