使内容适合 angular powerBi 客户端 iframe

Question

我有几个用 Power BI 设计的报表。问题如下：我创建的 iframe 的高度为 80rem（没问题）。问题是如果报告的高度较低，则会有一个空白 space 我想删除。

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

看了觉得用pages 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
            }
        }
    }
};

Answer 1

早上好，

最后我发现我的问题是为了在某些屏幕上保持16:9的宽高比，高度降低了很多。要解决这个问题很简单，只要根据屏幕的宽度修改 iframe 的容器 div 的高度即可：

    @media only screen and (max-width: 1600px) {
        // TODO: A variable
        height: 60rem;
    }
    @media only screen and (max-width: 1300px) {
        // TODO: A variable
        height: 55rem;
    }
    @media only screen and (max-width: 800px) {
        // TODO: A variable
        height: 35rem;
    }

这样 iframe 就会根据报告的内容进行调整。

我的 HTML div & iframe:

    <div class="tn-powerbi__frame" [ngClass]="{ 'tn-powerbi__frame--fullscreen': fullscreen,'tn-powerbi__frame--insurtech': reportId===20  }" #powerbiFrame></div>

Iván Allué

Answer 2

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

使内容适合 angular powerBi 客户端 iframe

Fit content to angular powerBi client iframe

css

angular

iframe

powerbi

powerbi-custom-visuals