PowerBI-JavaScript学习日记（嵌入二：嵌入视图中创建和编辑报表、Service Details）

如何在嵌入视图中创建和编辑报表

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