在 power bi embedded 中切换移动和桌面视图

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

您可以这样做，而不是嵌入一个报告的两个实例：

通过更新设置更改布局类型，如下所示：change-layout-example。这种方法的缺点是在更改布局时不会保存用户的交叉过滤器。

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

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);
        })
    })
}

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

使用自定义布局而不是移动布局，如下所示：Dynamic report layout。这种方法的缺点是您必须编写动态设置布局的代码。

Answer 2

Power BI embed Javascript 库直接支持您的案例。

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

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

MobilePortrait - 针对纵向视图进行了优化（这是手机您在 Power BI 桌面上创建的布局）
MobileLandscape - 优化用于景观视图。此布局看起来像常规报表布局。

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

// 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

在 power bi embedded 中切换移动和桌面视图

Switch between mobile and desktop view in power bi embedded

powerbi-embedded