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

项目
07/17/2024

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

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

报告
仪表板
仪表板磁贴
报表视觉对象
Q&A

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

本部分介绍如何将 React 导入应用，并将其用于嵌入 Power BI 报表。

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

导入 React 库

可以在 NPM上找到 Power BI React 组件。它还在 GitHub上开放源代码。

若要将 React 导入 Web 应用，请添加列出的导入：

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

使用 React 嵌入报表

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

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        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 项并获得更好的性能。有关详细信息，请参阅使用启动来提高性能。

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 演示

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

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

显示 Power B I React 演示的动画 gif。

运行演示

演示是存储库中的子文件夹。若要在 localhost 上运行演示，请执行以下步骤：

运行以下命令：
```
npm run install:demo
npm run demo
```
若要在浏览器中查看，请将其重定向到 http:/localhost:8080/。

通过