Power BI Client React 使用教程

Power BI Client React 使用教程

powerbi-client-reactPower BI for React which provides components and services to enabling developers to easily embed Power BI reports into their applications.项目地址:https://gitcode.com/gh_mirrors/po/powerbi-client-react

项目介绍

Power BI Client React 是一个由 Microsoft 开发的开源项目，旨在帮助开发者在使用 React 框架时，能够轻松集成 Power BI 报表和仪表板。该项目提供了一系列的 React 组件，使得在 React 应用中嵌入 Power BI 内容变得简单快捷。

项目快速启动

安装依赖

首先，你需要在你的 React 项目中安装 powerbi-client 和 powerbi-client-react 包。

npm install powerbi-client powerbi-client-react

基本使用

以下是一个简单的示例，展示如何在 React 应用中嵌入一个 Power BI 报表。

import React from 'react';
import { PowerBIEmbed } from 'powerbi-client-react';
import 'powerbi-report-authoring';

const App = () => {
  return (
    <div style={{ height: '800px' }}>
      <PowerBIEmbed
        embedConfig={{
          type: 'report', // "report" 对应 Power BI 报表，"dashboard" 对应仪表板
          id: '<REPORT_ID>',
          embedUrl: '<EMBED_URL>',
          accessToken: '<ACCESS_TOKEN>',
          tokenType: 1, // 0 对应 AAD 令牌，1 对应 Embed 令牌
          settings: {
            panes: {
              filters: {
                expanded: false,
                visible: false
              }
            },
            background: {
              color: 'transparent'
            }
          }
        }}
        eventHandlers={
          new Map([
            ['loaded', function () { console.log('Report loaded'); }],
            ['rendered', function () { console.log('Report rendered'); }],
            ['error', function (event) { console.log(event.detail); }]
          ])
        }
        cssClassName="embed-container"
        getEmbeddedComponent={(embeddedReport) => {
          window.report = embeddedReport;
        }}
      />
    </div>
  );
};

export default App;

应用案例和最佳实践

应用案例

1. 企业内部仪表板：在企业内部网站中嵌入 Power BI 仪表板，用于展示销售数据、库存状态等关键业务指标。
2. 客户门户：为客户提供一个门户网站，嵌入 Power BI 报表，让客户能够实时查看与其业务相关的数据。

最佳实践

1. 安全性：确保使用正确的令牌类型（AAD 或 Embed），并妥善管理访问令牌，避免泄露。
2. 性能优化：合理设置报表的加载和渲染事件，优化页面加载速度。
3. 用户体验：根据用户需求调整报表的显示设置，如过滤器面板的展开状态和背景颜色。

典型生态项目

Power BI Client React 可以与其他 Microsoft 生态项目无缝集成，例如：

1. Microsoft Teams：在 Teams 中嵌入 Power BI 报表，方便团队成员实时查看和讨论数据。
2. Azure Logic Apps：通过 Logic Apps 自动化数据处理流程，并将结果展示在 Power BI 报表中。
3. Microsoft Dynamics 365：将 Dynamics 365 的数据集成到 Power BI 报表中，提供更全面的业务视图。

通过这些集成，可以构建一个强大的数据分析和展示平台，满足不同业务场景的需求。

powerbi-client-reactPower BI for React which provides components and services to enabling developers to easily embed Power BI reports into their applications.项目地址:https://gitcode.com/gh_mirrors/po/powerbi-client-react