如何在Power BI嵌入式报表中去除可视化报表的灰色边框?

8
当我呈现Power BI可视化时,我注意到图像的左右两侧有一个灰色边框。有没有办法去掉它? enter image description here 令人尴尬的是,灰色边框并未影响iframe的顶部或底部。
谢谢, Derek
2个回答

10
尝试像这样做。 (从powerbi-javascript示例中提取)。将#reportContainer div作为输入传递给powerbi.embed,您就不应该看到插入边框。

    <style>
    #reportContainer {
        width: 100%;
        height: 750px;
        background-color: white;
        padding: 0px;
        clear: both;
    }
    .desktop-view iframe, .mobile-view iframe {
        border: none;
    }
</style>
<h2>Sample PowerBI Embedded Report</h2>
<div class="desktop-view" style="display: block;">
    <div id="reportContainer"></div>
</div>

对于报告,您可以执行以下操作以使背景透明(并且还可以适应宽度)。

Result

                var embedConfig = {
                    type: type,
                    id: id,
                    embedUrl: embedUrl,
                    viewMode: getViewModeFromModel(viewMode),
                    tokenType: models.TokenType.Aad,
                    accessToken: token,
                    pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                    pageName: pageName,

                    // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                    settings: {
                        filterPaneEnabled: true,
                        navContentPaneEnabled: true,
                        background: models.BackgroundType.Transparent,
                        // START Report specific settings
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                            displayOption: models.DisplayOption.FitToWidth
                        }
                        // END Report specific settings
                    }
                }

我不相信这样解决问题。问题在于iframe本身包含一个灰色背景。你在代码中所做的只是改变了iframe的容器...但是iframe仍然会呈现灰色背景的内容。 - darewreck
我更新了我的答案,提供了一种在报告中实现此操作的方法 - 但是这种方法无法用于仪表板。 - Sat Thiru
1
谢谢,他们实际上就在几周前发布了这个功能;添加透明背景。 - darewreck
你知道这个版本有吗?我目前正在使用"powerbi-client": "2.5.1",这是最新版本,但它仍然没有,除非我做错了。但我已经添加了背景。 - darewreck
@darewreck,我也在使用2.5.1版本。你可能需要仔细检查你的代码 - 或者从我的代码复制/粘贴开始。 - Sat Thiru
显示剩余2条评论

5

只需添加此CSS代码即可删除PowerBI生成的iframe边框。 它对我非常有效。

<style>
  iframe {  border: none; }
</style>

这应该添加到应用程序的根样式文件 styles.css 中。 - Kishan Dasari

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接