Einbetten eines Power BI-Elements in eine React Anwendung
Beim Erstellen einer eingebetteten Power BI-Analyseanwendung können React Ihnen helfen, die Leistung mit der Bootstrap-Integration zu optimieren und dabei alle clientseitigen APIs zu verwenden, einschließlich der Berichtserstellung. Außerdem wird die Verwaltung des Lebenszyklus von Power BI-Einbettung in Ihre Anwendung vereinfacht. Die Power BI-React-Komponente unterstützt Sowohl JavaScript als auch TypeScript und hilft Ihnen beim Einbetten Ihrer Analysen in eine React Webanwendung.
Mit der React-Bibliothek können Sie die folgenden Power BI-Elemente einbetten:
- Berichte
- Dashboards
- Dashboardkacheln
- Visuelle Berichtselemente
- Fragen und Antworten
Einbetten eines Power BI-Elements in eine React Web-App
In diesem Abschnitt wird beschrieben, wie Sie React in Ihre App importieren und zum Einbetten eines Power BI-Berichts verwenden.
Ausführliche Informationen zur Verwendung finden Sie in der Power BI-React-Readme-Datei.
Importieren der React-Bibliothek
Die Power BI-React-Komponente finden Sie unter NPM. Es ist auch open sourced auf GitHub.
Um React in Ihre Web-App zu importieren, fügen Sie die unten 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 mithilfe von React einbetten. Unter dem Beispiel 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:
eventHandlers: 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 dem Sie den Stil des eingebetteten Iframes mithilfe von CSS steuern können.
getEmbedComponent: Ein Rückruf, mit dem Sie die eingebetteten instance 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 instance 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 Use bootstrap for better performance (Verwenden von Bootstrap für 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
}
}
demo React
Das React-Repository enthält eine Demo, die den gesamten Ablauf des Bootstrappings eines Berichts, der Einbettung und des Aktualisierens des eingebetteten Berichts veranschaulicht. Außerdem wird die Verwendung der Powerbi-Berichtserstellungsbibliothek veranschaulicht, indem ein Visual aus einem Bericht gelöscht wird, wenn Sie auf die Schaltfläche Visual löschen klicken.
Weitere Informationen finden Sie im Demoabschnitt der Infodatei .
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:
Führen Sie die folgenden Befehle aus:
npm run install:demo npm run demoUm sie in Ihrem Browser anzuzeigen, leiten Sie sie an um
http:/localhost:8080/.