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嵌入Javascript库直接支持您的案例。

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

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

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中

2 个答案: