如何在反应中嵌入分页报告答案

【问题标题】：How to embed a paginated report in react如何在反应中嵌入分页报告
【发布时间】：2023-01-20 17:26:35
【问题描述】：

我在设置 React 应用程序以嵌入分页 Power BI 报告时遇到困难。我可以让它在普通报告上正常工作，但我无法在分页报告上做到这一点。

如果有人有他们用来在反应 Web 应用程序中呈现分页报告的反应代码示例，我是在反应应用程序中嵌入 Power BI 分页报告的新手吗？

我搜索了所有文档，可能会遗漏一些简单的配置。

到目前为止，这是我尝试过的：

在应用程序.jsx

import { useEffect, useRef } from 'react';
import {
  service,
  factories,
  models
} from 'powerbi-client';

const powerbi = new service.Service(
  factories.hpmFactory,
  factories.wpmpFactory,
  factories.routerFactory
);

const App = () => {
  const reportContainerRef = useRef(null);


  useEffect(() => {
    const reportContainer = reportContainerRef.current;

    const report = powerbi.embed(reportContainer, {
      type: 'report',
      tokenType: models.TokenType.Embed,
      accessToken: 'ACCESS_TOKEN_HERE',
      embedUrl:'EMBED_URL_HERE',
      settings: {
        filterPaneEnabled: false,
        navContentPanelEnabled: true
      }
    });
  }, []);

  return (
    <div className="w-full h-full">
      <div className="flex items-center h-full w-full" ref={reportContainerRef} />
    </div>
  );
};
export default App;

我不知道如何从 Power BI REST API 获取访问令牌，但现在，我已经通过需要使用命令显示的分页报告的控制台进行了复制复制（powerBIAccessToken）.

对于嵌入 URL - 我通过在分页报告中单击“文件”>“嵌入”来获取它。

我不确定我做错了什么，但在我的反应应用程序中，我只是得到微调器并且没有加载报告。我在控制台中收到以下错误，但我无法确定这是否是确切的问题：

我无法弄清楚为什么它会这样。有没有办法做到这一点？任何帮助，将不胜感激。

【问题讨论】：

标签： reactjs powerbi powerbi-embedded

【解决方案1】：

嵌入 Power BI 分页报表需要服务主体。获取访问令牌，参考 React Developer Samples GitHub repo PowerBI-Developer-Samples/React-TS

如果您遇到任何问题，请按照自述文件设置应用程序

参考：

Embed paginated reports in your Power BI embedded analytics application - Power BI | Microsoft Learn

【讨论】：