PowerBI 嵌入式垂直滾動條不可見

Question

我嵌入了 PowerBI 報告。 這是帶有頁面設置的 Javascript。

出於某種原因，我的報告中沒有垂直滾動條。 當我在工作區在線打開它時，滾動條工作得很好。 我已經嘗試在 PowerBi 中的不同“查看”選項之間切換，但這似乎沒有什么區別。

<H2>PowerBI</H2>
<p><i>User: {{username}} | AccessLevel: {{access_level}}</i></p>
<div id="reportContainer" style="height: 80vh;"></div>

<script type="text/javascript">
window.onload = function () {
 
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                pageSize: {
                    type: models.PageSizeType.Widescreen,
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.fullscreen(); 
            }
</script>

Answer 1

嘗試在 customLayout object 中添加值為“FitToWidth”的“displayOption”屬性，因為此選項將嘗試根據頁面的總可用大小調整報告，並在必要時為剩余部分引入滾動條。

還要在 pageSizeType object 中將“寬屏”更改為“自定義”

完成所有更改后，您的 embedConfiguration 將如下所示。

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
                pageSize: {
                    type: models.PageSizeType.Custom, // Change to "Custom"
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

參考文檔： https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/custom-layout