如何为 Microsoft PowerBI IFrame 设置样式？答案

【问题标题】：How to style Microsoft PowerBI IFrame?如何为 Microsoft PowerBI IFrame 设置样式？
【发布时间】：2022-11-04 16:43:24
【问题描述】：

我正在使用以下库：

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

我想删除背景，以及底部的“板”和导航选项卡之间的间距。

我尝试使用自定义类名，但它不起作用，里面的类是 IFrame 本身中的类。

const CustomPage = styled(Page)`
  margin-top: 1rem;

  .powerbi-embed-container {
    width: 100%;

    iframe {
      border: none !important;

      .backgroundContainer,
      .visualBackgroundContainer,
      .outspaceContainer {
        background-color: transparent !important;
      }

      .embeddedLandingRootContentLogoHidden {
        height: 90% !important;
      }
    }
  }
`;


 <CustomPage>
        <PowerBIEmbed
          cssClassName="powerbi-embed-container"
          embedConfig={{
            type: 'report', // Supported types: report, dashboard, tile, visual and qna
            id: '',
            embedUrl: '',
            accessToken: '',
            tokenType: models.TokenType.Embed,
            settings: {
              layoutType: models.LayoutType.Custom,
            },
          }}
          eventHandlers={
            new Map([
              ['loaded', function () {console.log('Report loaded');}],
              ['rendered', function () {console.log('Report rendered');}],
              ['error', function (event) {console.log(event.detail);}]
            ])
          }
          getEmbeddedComponent={(embeddedReport) => {
            window.report = embeddedReport;
          }}
        />
      </CustomPage>

【问题讨论】：

标签： reactjs powerbi powerbi-embedded

【解决方案1】：

您想要的所有更改都可以通过更新嵌入配置对象来实现。

在您的嵌入配置对象中，您可以使用 customLayout 来更改视觉效果的对齐方式：

customLayout: {
    ...
    pagesLayout: {
        "ReportSection1": {
            defaultLayout: {
                displayState: {
                    mode: models.VisualContainerDisplayMode.Hidden
                }
            },
            visualsLayout: {
                "VisualContainer1": {
                    x: 1,
                    y: 1,
                    z: 1,
                    width: 400,
                    height: 300,
                    displayState: {
                        mode: models.VisualContainerDisplayMode.Visible
                    }
                },
                "VisualContainer2": {
                    displayState: {
                        mode: models.VisualContainerDisplayMode.Visible
                    }
                },
            }
        }
    }
}

将 pangeNavigation 和过滤窗格可见性更新为 false 以隐藏它们并将背景设置为透明：

 let config = {
        ...
        settings: {
            background: models.BackgroundType.Transparent,
            panes: {
                filters: {
                    visible: false
                },
                pageNavigation: {
                    visible: false
                }
            }
        }
    };

参考：

https://learn.microsoft.com/javascript/api/overview/powerbi/configure-report-settings

https://learn.microsoft.com/javascript/api/overview/powerbi/custom-layout

如果您想探索所有 Power BI API，可以查看：Microsoft Power BI Embedded Analytics Playground

【讨论】：