在 React 應用程式中內嵌 Power BI 專案

發行項
01/18/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專案並取得更好的效能。如需詳細資訊，請參閱使用 Bootsrap 來提升效能。

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