Incorporare contenuto di Power BI in un'applicazione Vue

Vue è un framework JavaScript per la creazione di interfacce utente e siti Web front-end. Il componente Vue consente di incorporare semplicemente il contenuto di Power BI nell'applicazione Vue, consentendo di sfruttare al meglio sia Vue che Power BI embedded.

La libreria di vue.js di Power BI consente di incorporare gli elementi di Power BI seguenti nell'applicazione Vue:

  • Rapporti
  • Dashboard
  • Riquadri del dashboard
  • Oggetti visivi del report
  • Q&A
  • Report impaginati

Come incorporare contenuto di Power BI in un'app Web Vue

Questa sezione descrive come importare Vue nell'app e usarla per incorporare un report di Power BI.

Per informazioni dettagliate sull'utilizzo, vedere il file leggimi di Power BI Vue .

Importare la libreria Vue

È possibile trovare i componenti di Power BI Vue in NPM. È anche open source in GitHub.

Per importare Vue nell'app Web, aggiungere le importazioni elencate di seguito.

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

Incorporare il report con Vue

Questo esempio illustra come incorporare un report di Power BI usando Vue. Di seguito è riportata una descrizione di ogni componente nell'esempio di codice.

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

L'elenco seguente include descrizioni o informazioni aggiuntive per ogni componente nell'esempio di frammento di codice.

  • embedConfig: definisce il contenuto che si sta incorporando e specifica le impostazioni del contenuto. La configurazione di incorporamento cambia quando si incorporano gli elementi di Power BI seguenti:

  • cssClassName: fornisce all'elemento incorporato nomi di classe CSS che consentono di controllare lo stile dell'iframe incorporato usando CSS.

  • phasedEmbedding: migliora l'esperienza dell'utente finale offrendo agli sviluppatori maggiore flessibilità per l'incorporamento dei report in più fasi. Per altre informazioni, vedere Usare di incorporamento in più fasi.

  • eventHandlers: oggetto mappa per i nomi degli eventi e i relativi gestori. Per altre informazioni, vedere Come gestire gli eventi.

Eseguire il bootstrap di un report di Power BI

powerbi.bootstrap è un metodo usato per consentire agli sviluppatori di incorporare elementi di Power BI più velocemente e ottenere prestazioni migliori. Per altre informazioni, vedere Usare bootstrap per ottenere prestazioni migliori.

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

Per incorporare il report dopo il bootstrap, aggiornare embedConfig (con almeno accessToken e embedUrl).

Demo di Vue

Il repository Vue include una demo che incorpora un report di esempio usando il componente powerBIReportEmbed . Illustra il flusso completo dal bootstrap del report, all'incorporamento e all'aggiornamento del report incorporato. Viene inoltre illustrato come usare la raccolta di creazione di report di powerbi , consentendo all'utente di modificare il tipo di oggetto visivo da un report usando il pulsante Modifica tipo di oggetto visivo. Imposta anche un evento 'DataSelected'.

Per altre informazioni, vedere la sezione demo del file leggimi .

Gif animata che mostra la demo di Power BI Vue.

Eseguire la demo

La demo è una sottocartella nel repository. Per eseguire la demo in localhost, seguire questa procedura:

  1. Eseguire i comandi seguenti:

    npm run demo

  2. Per visualizzare nel browser, reindirizzarlo a http:/localhost:3000/.

Contenuto correlato

  • Last updated on