Freigeben über

Einbetten von Power BI-Inhalten in eine Vue-Anwendung

Vue ist ein JavaScript-Framework zum Erstellen von Front-End-Benutzeroberflächen und Websites. Mit der Vue-Komponente können Sie Power BI-Inhalte einfach in Ihre Vue-Anwendung einbetten, sodass Sie sowohl Vue als auch Power BI eingebettet nutzen können.

Mit der Power BI vue.js-Bibliothek können Sie die folgenden Power BI-Elemente in Ihre Vue-Anwendung einbetten:

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

Einbetten von Power BI-Inhalten in eine Vue-Web-App

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

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

Importieren der Vue-Bibliothek

Sie finden Power BI Vue-Komponenten auf NPM-. Es ist auch open sourced auf GitHub.

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

import { PowerBIEmbedModule } from 'powerbi-client-vue-js';

Einbetten des Berichts mit Vue

In diesem Beispiel wird gezeigt, wie Sie einen Power BI-Bericht mit Vue 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:

  • 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.

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

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).

Vue-Demo

Das Vue-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 veranschaulicht, wie Sie die powerbi-Berichterstellung Bibliothek verwenden, indem der Benutzer den Typ der visuellen Darstellung in einem Bericht mithilfe der Schaltfläche visuellen Typs ändern ändern kann. Außerdem wird ein "DataSelected"-Ereignis festgelegt.

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

Eine animierte GIF-Datei, die die Power BI Vue 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:3000/um.

Verwandte Inhalte

  • Last updated on