powerbi-embedded - 摆脱嵌入式 powerbi 报告的白色背景

Question

我的目标是将 powerbi 报告嵌入到 Web 应用程序中，而无需使用白色壁纸。当我在 Power BI 桌面中打开我的报告时，我将“壁纸”颜色配置为 100% 的透明度。在实际嵌入我使用的报告时：

background: pbi.models.BackgroundType.Transparent,

但这无济于事。嵌入报告时，我仍然有一个白色背景墙纸的东西，来自以下类：

.reportContainerContent {
    background: #fff;
}

和

.reportContainerContent .embeddedPV {
    background: #fff;
}

我在哪里禁用这个 - 我只是想要没有壁纸/背景颜色。？

PS 使用开发工具删除属性，得到想要的结果

标签： powerbi-embedded

Answer 1

为了应用透明背景（参考链接- 第 5 点），您必须遵循以下步骤：

步骤 1：在脚本中包含 Power BI JS 库（您必须已经这样做才能嵌入报表）：

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

第 2 步：从窗口中使用模型：

var models = window['powerbi-client'].models;

第 3 步：使用消费模型中的透明背景类型，并在嵌入配置中添加设置属性，如下所示：

var embedConfiguration = {
                            type: 'report',
                            tokenType: models.TokenType.Aad,
                            accessToken: token,
                            embedUrl: response.embedUrl,
                            id: reportId,
                            permissions: models.Permissions.ReadWrite,
                            viewMode: models.ViewMode.View,
                            settings: {
                                background: models.BackgroundType.Transparent
                            }
                        };

它对我有用。

前：

后：

如果您仍然遇到任何问题，请提供您的配置代码片段。