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