时间戳

首页 > 解决方案 > 使内容适合有角度的 powerBi 客户端 iframe

css - 使内容适合有角度的 powerBi 客户端 iframe

问题描述

我有几个在 Power BI 中设计的报告。问题如下：我创建的 iframe 的高度为 80rem（没关系）。问题是，如果报告的高度较低，我想删除一个空白区域。

在此处输入图像描述

我一直在使用 css 进行测试，如果我将 iframe 的高度变小，则其他报告会被剪切，如果我删除报告的高度，则报告的大小保持为 300w x 150h，我也尝试过使用页面布局阅读（我不不知道如何使用它，因为我不知道密钥是从哪里获取的），显示选项和视觉布局。这一切都没有成功。我使用的指南如下：https ://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout

读到我觉得它是通过页面布局解决的，但我不知道如何使用它。你有解决方案吗？提前致谢。

power bi 配置是这样的：

  this.config = {
        accessToken: accessToken && accessToken.currentValue ? accessToken.currentValue : this.config.accessToken,
        tokenType: tokenType && tokenType.currentValue ? this.getTokenType(tokenType.currentValue) : this.config.tokenType,
        embedUrl: embedUrl && embedUrl.currentValue ? embedUrl.currentValue : this.config.embedUrl,
        type: type && type.currentValue ? type.currentValue : this.config.type,
        id: id && id.currentValue ? id.currentValue : this.config.id,
        filters: filtersExternal && filtersExternal.currentValue ? filtersExternal.currentValue : this.config.filters,
        ...this.fixedConfig
    };

和固定配置：

 // Fixed configuration
fixedConfig: IEmbedConfiguration = {
    settings: {
        navContentPaneEnabled: false,
        filterPaneEnabled: false,
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                height: 600,
                width: 1300
            }
        }
    }
};

标签： cssangulariframepowerbipowerbi-custom-visuals

解决方案

这对我来说可以调整 UI 中的 power bi 报告的大小

 this.reportService.getReportObject(reportName).subscribe(res => {
       
        this.reportmodel = res;
        this.config = {
            type: res.reportType,
            id: res.id,
            accessToken: res.embedToken.token,
            embedUrl: res.embedUrl,
            permissions: pbi.models.Permissions.All,
            tokenType: pbi.models.TokenType.Embed,
            viewMode: pbi.models.ViewMode.View,
            settings: {
                filterPaneEnabled: false,
                navContentPaneEnabled: navigation,
                layoutType: pbi.models.LayoutType.Custom,
                customLayout: {
                   displayOption: pbi.models.DisplayOption.FitToWidth
                }
            }
        };
        this.hideloader(); 
        this.pbiContainerElement =  document.getElementById('pbi-container');
        this.powerBiService = new NgxPowerBiService();
        this.powerBiService.reset(this.pbiContainerElement);
        const reportobj = this.powerBiService.embed(this.pbiContainerElement, this.config) as pbi.Report;
        reportobj.off('loaded');
        reportobj.on('loaded', () => {
            reportobj.setPage(this.reportmodel.pageName);
                 });
    },
    err => {
        this.hideloader();
        console.log(err);
        this.dashboardLoadError = true;
        throw new Error('Exception occured while rendering the dashboard:' + err);
    });

推荐阅读