通过

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

  • 项目

移动用户可以以横向方式查看任何 Power BI 报表页。 但是，报表作者可以创建一个针对移动设备进行优化的附加视图，并在纵向中显示。 此设计选项可在 Power BI Desktop 和 Power BI 服务中使用，使作者能够仅选择和重新排列那些对移动用户有意义的视觉对象。

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

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

首先需要为报表创建移动布局，请查看 为移动应用优化 Power BI 报表 创建此布局。

若要在报表的移动布局中嵌入 Power BI 报表，应在设置对象中将 layoutType 设置为 models.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 客户端 Page 类将 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'

相关内容