Partager via

Incorporer du contenu Power BI dans une application Vue

Vue est une infrastructure JavaScript pour la création d’interfaces utilisateur front-end et de sites web. Le composant Vue vous permet d’incorporer du contenu Power BI dans votre application Vue simplement, ce qui vous permet de tirer le meilleur parti de Vue et de Power BI embedded.

La bibliothèque de vue.js Power BI vous permet d’incorporer les éléments Power BI suivants dans votre application Vue :

  • Rapports
  • Tableaux
  • Vignettes du tableau de bord
  • Visuels de rapport
  • Questions et réponses
  • Rapports paginés

Comment incorporer du contenu Power BI dans une application web Vue

Cette section explique comment importer Vue dans votre application et l’utiliser pour incorporer un rapport Power BI.

Pour plus d’informations sur l’utilisation, consultez le fichier readme Power BI Vue.

Importer la bibliothèque Vue

Vous trouverez des composants Power BI Vue sur NPM . Il est également open source sur GitHub .

Pour importer Vue dans votre application web, ajoutez les importations répertoriées ci-dessous.

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

Incorporer le rapport avec Vue

Cet exemple montre comment incorporer un rapport Power BI à l’aide de Vue. Vous trouverez ci-dessous une description de chaque composant dans l’exemple de code.

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

La liste suivante inclut des descriptions ou des informations supplémentaires pour chaque composant de l’exemple d’extrait de code.

  • embedConfig : définit le contenu que vous incorporez et spécifie les paramètres du contenu. La configuration incorporée change lorsque vous incorporez les éléments Power BI suivants :

  • cssClassName : donne à l’élément incorporé un nom de classe CSS qui vous permet de contrôler le style de l’iframe incorporé à l’aide de CSS.

  • phasedEmbedding : améliore l’expérience de l’utilisateur final en donnant aux développeurs davantage de flexibilité pour l’incorporation de rapports de phase. Pour plus d’informations, consultez Utiliser l’incorporation par phases.

  • eventHandlers : objet de mappage pour les noms d’événements et leurs gestionnaires. Pour plus d’informations, consultez Comment gérer les événements.

Démarrage d’un rapport Power BI

powerbi.bootstrap est une méthode utilisée pour aider les développeurs à incorporer des éléments Power BI plus rapidement et à obtenir de meilleures performances. Pour plus d’informations, consultez Utiliser le démarrage pour de meilleures performances.

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

Pour incorporer le rapport après démarrage, mettez à jour l’embedConfig (avec au moins accessToken et embedUrl).

Démonstration Vue

Le référentiel Vue inclut une démonstration qui incorpore un exemple de rapport à l’aide du composant PowerBIReportEmbed. Il illustre le flux complet de démarrage du rapport, de l’incorporation et de la mise à jour du rapport incorporé. Il montre également comment utiliser la bibliothèque de création de rapports powerbi powerbi en permettant à l’utilisateur de modifier le type de visuel à partir d’un rapport à l’aide du bouton Modifier le type de visuel. Il définit également un événement « DataSelected ».

Pour plus d’informations, consultez la section démonstration du fichier lisez-moi.

un gif animé qui montre la démonstration Power BI Vue.

Exécuter la démonstration

La démonstration est un sous-dossier dans le référentiel. Pour exécuter la démonstration sur localhost, procédez comme suit :

  1. Exécutez les commandes suivantes :

    npm run demo

  2. Pour afficher votre navigateur, redirigez-le vers http:/localhost:3000/.

Contenu connexe