使用移动布局嵌入 Power BI 报表

  • 项目

移动用户可以横向查看任何 Power BI 报表页。 但是，报表作者可以创建针对移动设备优化并纵向显示的其他视图。 Power BI Desktop 和 Power BI 服务中都提供了此设计选项，通过该选项，作者可以选择和重新排列对漫游的移动用户来说有意义的视觉对象。

如果报表具有在 Power BI Desktop 或 Power BI 服务 中创建的移动布局，则可以在 Web 应用程序中嵌入此布局的报表。

如何使用移动布局嵌入报表

首先，需要为报表创建移动布局，检查优化移动应用的 Power BI 报表，以便创建此布局。

若要在报表的移动布局中嵌入 Power BI 报表，应在 settings 对象中将 设置为 layoutTypemodels.LayoutType.MobilePortrait ：

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

有关报表设置的详细信息，请参阅 配置报表设置。

有两种专用于移动设备的布局类型：

  • MobilePortrait - 针对纵向视图进行优化。 这是为报表创建的移动布局。

  • MobileLandscape - 针对横向视图进行优化。 这是报表的常规布局。

注意

无论设备的实际方向如何， layoutType 报表布局将由 属性确定。

例如，以下代码演示如何使用移动布局嵌入报表。

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

若要在已加载报表时更新报表布局，请使用 report.updateSettings 方法。 有关详细信息，请参阅 在运行时更新报表设置。

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

检查报表页是否具有移动布局

Power BI 客户端 页 类将 hasLayout 方法定义为：

hasLayout(layoutType: any): Promise<boolean>

如果页面具有指定的布局类型，该方法 hasLayout 将返回布尔值。

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

可以将分阶段嵌入与 一起使用hasLayout，以便在呈现报表之前检查页面是否具有移动布局。

轻扫事件

在移动布局中嵌入报表时，可以侦听轻扫事件并在 Web 应用程序上运行自定义代码。 有两个轻扫事件， swipeStart 两 swipeEnd 者都返回以下格式：

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

例如，可以使用 swipeEnd 事件来检测向左轻扫：

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

有关处理事件的详细信息，请参阅 如何处理事件。

使用自定义布局优化应用

还可以使用 自定义布局 功能创建自定义布局，这些布局针对不同的手机或平板电脑屏幕进行优化。

限制

  • 在报表初始加载后，仅当移动布局 (纵向/横向) 已设置为初始嵌入配置对象时，才支持更改为报表移动布局。 否则，必须首先调用 powerbi.reset(HTMLElement) 以删除 iframe。 然后，必须使用对嵌入的配置对象上定义的移动布局设置的同一容器调用 powerbi.embed(...) 。

  • 如果尝试使用 布局嵌入报表页 MobilePortrait ，并且该页没有移动布局，则将随布局一起 MobileLandscape 加载该页面。

  • 若要允许用户在使用移动布局时在页面之间导航，可以使用 report.setPage 并实现自己的导航。 有关详细信息，请参阅 页面导航。

  • 上述配置是指在移动视图中嵌入 Power BI 报表。
    可以使用 pageView 配置将仪表板嵌入配置为移动布局： pageView: 'oneColumn'

后续步骤