PowerBI-JavaScript学习日记（嵌入三：分阶段嵌入）

本文链接：https://blog.youkuaiyun.com/NUAN__YANG/article/details/108395490

分阶段嵌入

Background

一般用powerbi.embed做嵌入

var config = {
    type: 'report',
    tokenType: TokenType.Embed ,// or TokenType.Aad
    accessToken: ...,
    embedUrl: ...,
    id: ...,
    ...
};
 
// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];
 
// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);

调用后，嵌入式对象将被加载，并且与对象的任何交互都显示时完成。

为了改善用户体验和给码哥哥们提供更大的灵活性，就有了分阶段的API。

这个函数需要一个HTML元素和一个IembedConfiguration对象，类似于powerbi.embed(…)

// 先来一手配置对象
var config = {
    type: 'report',
    tokenType: TokenType.Embed,
    accessToken: ...,
    embedUrl: ...,
    id: ...,
    ...
};
 
// 获取页面元素
var embedContainer = $('#embedContainer')[0];
 
// 嵌入报表并渲染
var report = powerbi.load(embedContainer, config);

...
// 加载完成后就会触发loaded这个事件
report.on("loaded", function() {
    var pages = report.getPages();
    ...
}

Render

如果用powerbi.load()，则需要用report.render()来继续渲染报表
渲染成功后触发‘rendered’

report.on('loaded', function() {
   // 调用render()
   report.render();
});

report.on('rendered', () => {
   // rendered handler 渲染处理程序
});

例：

const config = {
...
};

var report = powerbi.load(config);

report.on('loaded',async () => {
    await report.setFilters(fitlers);
    report.render();
});

支持的API：

Visuals：页面视觉效果
Themes：报告主题
Filters：设置、获取和重置所有过滤器（报表，页面和Visuals）
Slicers：设置并获取Slicers状态
Page navigation：页面导航设置
Update settings：更新设置
Bookmarks：获取和使用书签

一，Visuals

Get Visuals

获取视觉效果列表，如果要获取特定也年中的视觉效果列表，需要使用Page对象上的getVisuals async方法。

page.getVisuals().then(function(visuals) {
  ...
});

例：在第一页上获取视觉效果列表

report.getPages()
  .then(function (pages) {
    // Retrieve first page.
    var firstPage = pages[0];
 
    firstPage.getVisuals()
      .then(function (visuals) {
        console.log(visuals);
      })
  })