使用階段式內嵌
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 式會載入報表，但不會轉譯報表，因此使用者可以在看到結果之前進行互動。 例如，您可以搭配 report.getPages 使用 powerbi.load ，然後指定要顯示終端使用者的頁面。 或者，您可以使用 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 | 取得和設定視覺化交叉分析篩選器狀態。 |