在嵌入的 Power BI 中的移动视图和桌面视图之间切换

Question

我有一个包含桌面和移动视图的 Power bi 报表。我希望浏览器在调整大小时在这些视图之间切换。我目前可以实现此目的的唯一方法是将报表的两个实例嵌入到浏览器中，一个是移动实例，另一个是桌面实例，并根据浏览器大小隐藏和显示它们。

这样做的问题是，如果我在桌面视图中设置一些过滤器值，然后缩小浏览器以显示移动视图，那么过滤器值就不一样了，这显然是因为实际上有两个单独的报告。

这种方法的另一个缺点是，我的数据库可能还会产生生成两个报告的性能成本。

如何仅嵌入可在移动视图和桌面视图之间动态切换的单个报表？

更新 根据下面的响应，测试代码以在移动布局和自定义布局之间切换布局

angular.element($window).on('resize', function () {
if (vm.report === null)
return;
var models = window['powerbi-client'].models;
var newLayout = models.LayoutType.Custom;
if (window.innerWidth < 768) {
newLayout = models.LayoutType.MobilePortrait;
}
if (vm.report.config.settings.layoutType !== newLayout) {
const newSettings = { layoutType: newLayout };
vm.report.updateSettings(newSettings);
}}

更新 2，添加了代码以显示如何生成报告

// report config 
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: result.accessToken,
embedUrl: result.embedUrl,
id: result.reportId,
permissions: models.Permissions.View,
viewMode: models.ViewMode.Read,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
}
};
// get elements and embed them
var desktopReportContainer = $('.reportContainer')[0];
vm.report = powerbi.embed(desktopReportContainer, config);

Answer 1

您可以执行以下操作，而不是嵌入报表的两个实例：

1. 通过更新设置来更改布局类型，如下所示：更改布局示例。 此方法的缺点是更改布局时不会保存用户的交叉筛选器。

在更改布局类型

2. 之前，请保存书签，然后在更改布局类型后应用保存的书签：

   function changeLayout(layoutType) {
   report.bookmarksManager.capture()
   .then(function (capturedBookmark) {
   var bookmarkState = capturedBookmark.state;
   var config = {
   layoutType: layoutType
   };
   report.updateSettings(config).then(function () {
   report.bookmarksManager.applyState(bookmarkState);
   })
   })
   }
   

   请注意，您必须将错误处理代码添加到上面的示例中。

3. 使用自定义布局而不是移动布局，如下所示：动态报表布局。 此方法的缺点是必须编写动态设置布局的代码。

Answer 2

Power BI 嵌入 Javascript 库直接支持你的案例。

首先，需要使用 Power BI 桌面创建具有移动布局的报表。创建报表后，可以使用 JavaScript SDK 嵌入报表。为了决定嵌入哪个布局，请使用嵌入配置中设置的 layoutType 属性。

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

• 移动肖像 - 针对纵向视图进行了优化(这是移动设备 在 Power BI 桌面上创建的布局(
• 移动景观 - 优化 用于横向视图。此布局类似于常规报表布局。

在移动布局中加载报表 示例：

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
embedUrl: 'https://app.powerbi.com/reportEmbed',
tokenType: models.TokenType.Embed,
accessToken: 'h4...rf',
settings: {
layoutType: models.LayoutType.MobilePortrait
}
};

以下是详细指南：https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile