共用方式為

在 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 連結庫

您可以在 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 上執行示範，請遵循下列步驟：

  1. 執行下列命令：

    npm run install:demo
npm run demo

  2. 若要在瀏覽器中檢視，請將它重新導向至 http:/localhost:8080/。

相關內容