使用分阶段嵌入
Power BI 嵌入式分析和 powerbi.loadreport.render API 可让开发人员更灵活地分阶段嵌入报表，从而改善最终用户体验。
通常，使用 加载嵌入的报表 powerbi.embed：
let report = powerbi.embed(embedContainer, embedConfig);
嵌入的报表在用户界面中加载和呈现。 然后，最终用户会看到与呈现的报表的任何交互。 例如，如果应用切片器状态，最终用户会看到切片器在报表呈现后生效。
为了向最终用户隐藏这些交互， powerbi.load 和 report.render API 将嵌入过程分解为多个阶段。 函数 powerbi.load 加载报表，以便在最终用户看到结果之前与项进行交互。 然后，该 report.render 函数显示报表。
加载
函数 powerbi.load 加载报表但不呈现报表，因此交互可以在最终用户看到结果之前发生。 例如，可以将 与 一起使用powerbi.loadreport.getPages，然后指定要向最终用户显示的页面。 或者，可以使用 page.getVisuals，然后确定要显示或隐藏的视觉对象。
与 一样 powerbi.embed， powerbi.load 函数需要 HTML 元素和 IEmbedConfiguration 对象。
加载完成后，将触发事件 loaded 。
let config = {
...
};
// Get a reference to the embedded report HTML element.
let embedContainer = $('#embedContainer')[0];
// Load the report in the container.
let report = powerbi.load(embedContainer, config);
report.on('loaded', function() {
...
});
呈现
如果使用 powerbi.load，则必须在运行代码后对loaded事件处理程序函数调用 report.render 函数。 使用 report.render 继续呈现报表并显示嵌入的报表。
rendered当报表完成呈现时，将触发 事件。
report.on('loaded', function() {
report.render();
});
report.on('rendered', () => {
...
});
有关处理事件的详细信息，请参阅 如何处理事件。
示例
下面的代码示例加载报表，设置筛选器，然后呈现筛选的报表。
// Build the config object.
let config = {
type: 'report',
tokenType: TokenType.Embed,
accessToken: ...,
embedUrl: ...,
id: ...,
...
};
// Get a reference to the embedded report HTML element.
let embedContainer = $('#embedContainer')[0];
// Load the report in the container.
let report = powerbi.load(embedContainer, config);
...
report.on('loaded', async () => {
await report.setFilters(filters);
report.render();
});
限制
分阶段嵌入可能会减慢报表呈现速度，因此请确保仅在需要时才正确使用它。
可以在加载报表后和调用 之前调用 report.render以下 API：
| 方法 | 操作 |
|---|---|
| BookmarksManager.getBookmarks、BookmarksManager.apply | 获取并应用书签。 不支持捕获书签。 |
| Report.updateSettings | 更新报表设置。 |
| Report.applyTheme | 应用报表主题。 |
| Report.getFilters、 Report.setFilters、 Report.removeFilters | 获取、设置和删除报表筛选器。 |
| Report.getPages | 获取报表页。 |
| Page.setActive | 设置活动报表页。 |
| Page.getFilters、 Page.setFilters、 Page.removeFilters | 获取、设置和删除页面筛选器。 |
| Page.getVisuals | 获取页面视觉对象。 |
| Visual.getFilters、 Visual.setFilters、 Visual.removeFilters | 获取、设置和删除视觉对象筛选器。 |
| Visual.getSlicerState、Visual.setSlicerState | 获取和设置视觉对象切片器状态。 |