如何在嵌入的Power BI报告中给出宽度和高度

Question

我正在做一个 React 项目，我实现了一个 Power BI 嵌入来显示报告，我在 UI 中遇到了生成报告大小的问题。这是 Power BI Embed

的代码

 {selectedModel.AuthenticationMode !== null ? (
              <div className="iframe-container-powerbi">
                {generatedPowerBiToken && (
                  <PowerBIEmbed
                    embedConfig={{
                      type: "report",
                      id: generatedPowerBiToken.id,
                      embedUrl: generatedPowerBiToken.embedUrl,
                      accessToken: generatedPowerBiToken.accessToken,
                      tokenType: models.TokenType.Embed,
                      settings: {
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                          displayOption: models.DisplayOption.FitToPage,
                        },
                        panes: {
                          filters: {
                            expanded: true,
                            visible: true,
                          },
                        },
                        //background: models.BackgroundType.Transparent,
                      },
                    }}
                    eventHandlers={
                      new Map([
                        [
                          "loaded",
                          function () {
                            console.log("Report loaded");
                          },
                        ],
                        [
                          "rendered",
                          function () {
                            console.log("Report rendered");
                          },
                        ],
                        [
                          "error",
                          function (event) {
                            console.log(event.detail);
                          },
                        ],
                      ])
                    }
                    cssClassName={"report-style-class"}
                  />
                )}
              </div>
            ) : (
              <div className="iframe-container">
                <Iframe
                  url={ifActiveUrl}
                  width="100%"
                  height="100%"
                  id="modelIframe"
                  className="model-iframe"
                  display={ifUrlOpen ? "initial" : "none"}
                  position="relative"
                />
              </div>
            )}

当我加载报告时 UI 呈现如下

我需要增加图表的大小并减少用红色标注的 space 的大小。谁能提出解决方案？

Answer 1

要解决此问题，请在 iframe 中手动设置高度和宽度，而不是使用 100%。请在下面找到参考代码：

<iframe width="1080" height="520" src="Your_source_link" frameborder="0" allowFullScreen="true"></iframe>

我的高度和宽度为 100% 的输出：

更改高度和宽度后：

请在此处查找更多参考资料： How to determine a Power BI report's width and height for embedding

如何在嵌入的Power BI报告中给出宽度和高度

how to give width and height in power bi report in embedding

reactjs

powerbi

powerbi-embedded