Freigeben über

Einbetten von Power BI-Inhalten in eine Angular-Anwendung

Beim Erstellen einer eingebetteten Power BI-Analyseanwendung kann Angular dabei helfen, schnell eine bearbeitbare, skalierbare App einzurichten. Angular fügt Struktur- und Entwurfsmuster zur Front-End-Entwicklung hinzu, sodass Entwickler komplexere Webanwendungen erstellen können, die einfacher zu verwalten und zu aktualisieren sind.

Mit der Power BI Angular-Bibliothek können Sie die folgenden Power BI-Elemente in Ihre Angular-Anwendung einbetten:

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

So betten Sie Power BI-Inhalte in eine Angular-Web-App ein

In diesem Abschnitt wird beschrieben, wie Sie Angular in Ihre App importieren und verwenden, um einen Power BI-Bericht einzubetten.

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

Importieren der Angular-Bibliothek

Sie finden die Power BI Angular-Komponente auf NPM-. Es ist auch open sourced auf GitHub.

Um Angular in Ihre Web-App zu importieren, fügen Sie die unten aufgeführten Importe hinzu.

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Einbetten des Berichts mit Angular

In diesem Beispiel wird gezeigt, wie Sie einen Power BI-Bericht mit Angular einbetten. Unterhalb des Beispiels finden Sie eine Beschreibung der einzelnen Komponenten im Codebeispiel.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

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

  • embedConfig- – Definiert den Inhalt, den Sie einbetten, 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.

  • PhasedEmbedding- – Verbessert die Benutzererfahrung durch mehr Flexibilität beim Einbetten von Phasenberichten. Weitere Informationen finden Sie unter Phaseneinbettung verwenden.

Bootstrap eines Power BI-Berichts

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.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Um den Bericht nach dem Bootstrapping einzubetten, aktualisieren Sie die embedConfig (mit mindestens accessToken und embedUrl).

Angular-Demo

Das Angular-Repository enthält eine Demo, die einen Beispielbericht mithilfe der PowerBIReportEmbed-Komponente einbettet. Es veranschaulicht den vollständigen Fluss vom Bootstrapping des Berichts, zum Einbetten und Aktualisieren des eingebetteten Berichts. 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. Außerdem wird ein "DataSelected"-Ereignis festgelegt.

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

Eine animierte GIF-Datei, die die Power BI Angular 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 demo

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

Verwandte Inhalte

  • Last updated on