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

2024-07-03 18:50| 来源: 网络整理| 查看: 265

在React应用程序中嵌入 Power BI 项项目01/18/2024

创建 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库

可以在 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: '', 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 项时，嵌入配置会更改：

Report 报表视觉对象分页报表独立 Q&A 视觉对象仪表板仪表板磁贴

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 报表创作库的用法，方法是单击“删除视觉对象”按钮从报表中删除视觉对象。

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

运行演示

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

运行以下命令：

npm run install:demo npm run demo

若要在浏览器中查看，请将其重定向到 http:/localhost:8080/。

后续步骤

嵌入报表

嵌入报表视觉对象

使用启动来提高性能

配置报告设置

创建、编辑和保存报表

【本文地址】

公司简介

联系我们