在 React 应用程序中嵌入 Power BI 项目

创建 Power BI 嵌入式分析应用程序时，React 可以帮助您通过引导程序集成优化性能，同时使用所有客户端 API，包括报告创作。它还简化了应用程序中的 Power BI 嵌入生命周期管理。Power BI React 组件支持 JavaScript 和 TypeScript，可帮助您将分析嵌入到 React Web 应用程序中。

React 库允许您嵌入以下 Power BI 项目：

• 报告

• 仪表板

• 仪表板磁贴

• 报告视觉效果

• 问答

如何在 React Web 应用程序中嵌入 Power BI 项目

本节介绍如何将 React 导入您的应用程序并使用它来嵌入 Power BI 报表。

有关详细的使用信息，请参阅 Power BI React自述文件。

导入 React 库

Power BI React 组件可以在NPM上找到。它也在GitHub上开源。

要将 React 导入您的 Web 应用程序，请添加下面列出的导入。

Javascript复制

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

使用 React 嵌入报告

此示例演示如何使用 React 嵌入 Power BI 报表。在示例下方，您可以找到代码示例中每个组件的说明。

Javascript复制

embedConfig = {
    {        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '',        embedUrl: '',        accessToken: '',        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {            panes: {                filters: {                    expanded: false,                    visible: false
                }
            },
        }
    }
}

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"}

getEmbeddedComponent = {
    (embeddedReport) => {        window.report = embeddedReport;
    }
}

以下列表包括代码片段示例中每个组件的描述或附加信息。

• 嵌入配置- 定义您要嵌入的内容，并指定内容的设置。当您嵌入以下 Power BI 项目时，嵌入配置会发生变化：

• 报告

• 报表视觉

• 分页报告

• 独立问答视觉

• 仪表板

• 仪表板磁贴

• eventHandlers - 事件名称及其处理程序的映射对象。有关详细信息，请参阅如何处理事件。

• cssClassName - 为嵌入项提供 CSS 类名，让您可以使用 CSS 控制嵌入 iframe 的样式。

• getEmbedComponent - 一个回调，可帮助您获取嵌入式实例，以便您可以使用 Power BI 客户端库允许的所有 API。例如，嵌入报表时，您将获得Report类的一个实例。

引导一个组件

powerbi.bootstrap是一种用于帮助开发人员更快地嵌入 Power BI 项并获得更好性能的方法。有关详细信息，请参阅使用引导程序以获得更好的性能。

Javascript复制

embedConfig = {
    {        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,        embedUrl: undefined,        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

反应演示

React 存储库包含一个演示，演示了引导报告、嵌入和更新嵌入式报告的完整流程。它还通过单击“删除视觉对象”按钮从报告中删除视觉对象来演示powerbi 报告创作库的用法。

有关详细信息，请参阅自述文件的演示部分。

运行演示

演示是存储库中的一个子文件夹。要在本地主机上运行演示，请按照下列步骤操作：

1. 运行以下命令：

   狂欢复制

   npm run install:demo
   npm run demo
   

2. 要在您的浏览器中查看，请将其重定向到http:/localhost:8080/.