Freigeben über

Einbetten eines Power BI-Elements in eine React-Anwendung

  • Artikel

Wenn Sie eine eingebettete Power BI-Analyseanwendung erstellen, kann React Ihnen helfen, die Leistung mit der Bootstrap-Integration zu optimieren, während Sie alle clientseitigen APIs verwenden, einschließlich der Berichtserstellung. Außerdem wird die Power BI-Einbettungslebenszyklusverwaltung in Ihrer Anwendung vereinfacht. Die Power BI React-Komponente unterstützt sowohl JavaScript als auch TypeScript und hilft Ihnen, Ihre Analysen in eine React-Webanwendung einzubetten.

Mit der React-Bibliothek können Sie die folgenden Power BI-Elemente einbetten:

  • Berichte
  • Armaturenbretter
  • Dashboardkacheln
  • Visuelle Berichte
  • Fragen und Antworten

Einbetten eines Power BI-Elements in eine React-Web-App

In diesem Abschnitt wird beschrieben, wie React in Ihre App importiert und zum Einbetten eines Power BI-Berichts verwendet wird.

Ausführliche Informationen zur Verwendung finden Sie in der Power BI React Infodatei Datei.

Importieren der React-Bibliothek

Die Power BI React-Komponente befindet sich auf NPM-. Es ist auch open sourced auf GitHub.

Um React in Ihre Web-App zu importieren, fügen Sie die aufgeführten Importe hinzu:

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

Einbetten des Berichts mit React

In diesem Beispiel wird gezeigt, wie Sie einen Power BI-Bericht mit React einbetten. Unterhalb des Beispiels finden Sie eine Beschreibung für jede Komponente im Codebeispiel.

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

Die folgende Liste enthält Beschreibungen oder zusätzliche Informationen für jede Komponente im Codeausschnittbeispiel.

  • Einbettungskonfiguration – Definiert den Inhalt, den Sie einbetten möchten, und gibt die Einstellungen des Inhalts an. Die Einbettungskonfiguration ändert sich, wenn Sie die folgenden Power BI-Elemente einbetten:

  • ereignishandlers – Ein Zuordnungsobjekt für Ereignisnamen und deren Handler. Weitere Informationen finden Sie unter Behandeln von Ereignissen.

  • cssClassName- – Gibt dem eingebetteten Element einen CSS-Klassennamen, mit denen Sie die Formatvorlage des eingebetteten iframes mithilfe von CSS steuern können.

  • getEmbedComponent – Ein Rückruf, mit dem Sie die eingebettete Instanz abrufen können, sodass Sie alle APIs verwenden können, die die Power BI-Clientbibliothek zulässt. Wenn Sie beispielsweise einen Bericht einbetten, erhalten Sie eine Instanz der Report-Klasse.

Bootstrap einer Komponente

powerbi.bootstrap ist eine Methode, mit der Entwickler Power BI-Elemente schneller einbetten und eine bessere Leistung erzielen können. Weitere Informationen finden Sie unter Verwenden von Bootstrap für eine bessere Leistung.

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

Das React-Repository enthält eine Demo, die den vollständigen Bootstrapping eines Berichts, einbetten und den eingebetteten Bericht aktualisiert. Außerdem wird die Verwendung der powerbi-Berichtserstellung Bibliothek veranschaulicht, indem sie ein visuelles Element aus einem Bericht löschen, wenn Sie auf die Schaltfläche "Visuelle löschen" klicken.

Weitere Informationen finden Sie im Abschnitt Demo- der -Datei.

Eine animierte GIF-Datei, die die Power B I React Demo zeigt.

Ausführen der Demo

Die Demo ist ein Unterordner im Repository. Führen Sie die folgenden Schritte aus, um die Demo auf localhost auszuführen:

  1. Führen Sie die folgenden Befehle aus:

    npm run install:demo
npm run demo

  2. Um in Ihrem Browser anzuzeigen, leiten Sie sie zu http:/localhost:8080/um.

Verwandte Inhalte