使用 bootstrap 提高性能

  • 项目

powerbi.bootstrap 是客户端 SDK 版本 2.9.0 中引入的一种方法，可帮助开发人员更快地嵌入 Power BI 实体并获得更好的性能。

使用 powerbi.embed 嵌入报表需要多个参数，例如 reportId、 embedURL和 accessToken。 这些参数并不总是立即可用。

powerbi.bootstrap 允许在提供所有必需参数之前开始嵌入。 启动 API 将准备并初始化 iframe。

收到所需的参数后， powerbi.embed(element, config) 应在同一 HTML 元素上调用 。

Bootstrap API

方法 powerbi.bootstrap(element, config) 接收元素和配置，与 powerbi.embed(...)相同。

/**
    * Given an HTML element and entityType, creates a new component instance, and bootstrap the iframe for embedding.
    *
    * @param {HTMLElement} an HTML Element where you need to embed. must be the same div element you will use in powerbi.embed.
    * @param {IBootstrapEmbedConfiguration} config: a bootstrap config.
    */
bootstrap(element: HTMLElement, config: IBootstrapEmbedConfiguration): embed.Embed;

Bootstrap embed 配置

interface IBootstrapEmbedConfiguration {
  type: string;
  hostname?: string;
  embedUrl?: string;
  settings?: ISettings;
}

配置参数：

  • type (必需) ：要嵌入的实体类型，如“report”、“仪表板”、“tile”、“qna”或“visual”。
  • 主机名：如果 embedURL 还没有 ，可以提供主机名。 主机名是嵌入 URL 的域名。 例如，如果嵌入 URL 为“”https://app.powerbi.com/reportEmbed，则主机名为“https://app.powerbi.com/”。 如果未提供主机名或 embedUrl，则使用默认主机名 https://app.powerbi.com/。
  • embedUrl：稍后将提供给 powerbi.embed 的相同嵌入 URL。 如果未提供主机名或 embedUrl，则使用默认主机名 https://app.powerbi.com/。
  • 设置：若要在移动布局中嵌入报表或提供区域设置 (语言) ，请在初始设置中包含这些参数。

Bootstrap 示例

以下示例为嵌入 Power BI 实体时的引导方法提供了参考。

注意

请确保在收到嵌入参数后调用 powerbi.embed 。

若要启动嵌入报表，请执行以下操作：

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
        }
    );

若要启动嵌入仪表板，

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'dashboard',
            embedUrl: "https://app.powerbi.com/dashboardEmbed?dashboardId=06e3ba63-47ea-4579-b010-fdb5484b325a&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6mLndpbmRvd3MubmV0In0="
        }
    );

若要启动仅嵌入具有主机名的报表，请执行以下操作：

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
            hostname: "https://app.powerbi.com"
        }
    );

若要启动用于嵌入具有移动布局的报表，请执行以下操作：

powerbi.bootstrap(
        reportContainerDivElement,
        {
            type: 'report',
            hostname: "https://app.powerbi.com",
            settings: {
	            layoutType: models.LayoutType.MobilePortrait
            }
        }
    );

限制

  • 如果不调用 powerbi.reset(element)，则无法更改以下启动的实体。

    • 组件类型 (报表，仪表板) ：例如，如果启动报表，则只能在同一 HTML 元素中嵌入报表。
    • 桌面/移动) (布局
    • 区域设置 (语言)

  • 嵌入分页报表时不支持 powerbi.bootstrap 方法。

后续步骤