React嵌入PowerBI报告：移除iframe与报告空白并实现全屏显示

要解决iframe与PowerBI报告之间的空白边距问题，并实现全屏显示，可从以下几个方面入手：

1. 重置iframe的CSS样式 #

默认情况下，iframe可能自带边框、内边距或外边距，需要通过CSS彻底清除：

.power-bi-iframe {
  width: 100vw;  /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  border: none;  /* 移除默认边框 */
  margin: 0;     /* 清除外边距 */
  padding: 0;    /* 清除内边距 */
  display: block;/* 消除inline-block布局带来的额外间距 */
}

2. 配置PowerBI嵌入参数消除报告内部边距 #

PowerBI报告本身可能自带内边距，需在嵌入配置中明确移除：

const embedConfig = {
  type: 'report',
  id: '你的报告ID',
  embedUrl: '你的嵌入URL',
  accessToken: '你的访问令牌',
  settings: {
    layout: {
      padding: { top: 0, bottom: 0, left: 0, right: 0 }, // 清除报告内边距
      displayOption: 'FitToPage' // 让报告适配容器尺寸
    }
  }
};

3. 清除父容器及页面的默认边距 #

确保iframe的父容器和页面body没有多余的边距或滚动条：

body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁止页面滚动，避免全屏时出现滚动条 */
}

/* 若iframe嵌套在父容器中，同步设置父容器样式 */
.power-bi-wrapper {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

完成以上设置后，PowerBI报告就能全屏展示且无多余空白边距。

内容的提问来源于stack exchange，提问作者Smit Rathod