代码之家 › 专栏 › 技术社区 › Slicc

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

powerbi-embedded

0

Slicc · 技术社区 · 7 年前

我有一个带有桌面和移动视图的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);

2 回复 | 直到 7 年前

1

Gregory Borodin 7 年前

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

通过更新如下设置更改布局类型: 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 是的。这种方法的缺点是必须编写动态设置布局的代码。

2

0

nguyen.huu.duy 7 年前

power-bi-embed javascript库直接支持您的案例。

首先,您需要使用power bi desktop创建具有移动布局的报表。创建报表后,可以使用javascript sdk将其嵌入。要确定要嵌入哪个布局,请使用“嵌入配置”中“设置”的LayoutType属性。

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

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

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

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