Compartilhar via

Inserir conteúdo do Power BI em um aplicativo Vue

  • Artigo

O Vue é uma estrutura JavaScript para criar sites e interfaces de usuário front-end. O componente Vue permite que você insira conteúdo do Power BI em seu aplicativo Vue de forma simples, permitindo que você tire o máximo do Vue e do Power BI inseridos.

A biblioteca de vue.js do Power BI permite inserir os seguintes itens do Power BI em seu aplicativo Vue:

  • Relatórios
  • Painéis
  • Blocos de painel
  • Visuais de relatório
  • Q&A
  • Relatórios paginados

Como inserir conteúdo do Power BI em um aplicativo Web vue

Esta seção descreve como importar o Vue para seu aplicativo e usá-lo para inserir um relatório do Power BI.

Para obter informações detalhadas de uso, consulte o arquivo de do Power BI Vue.

Importar a biblioteca do Vue

Você pode encontrar componentes do Power BI Vue em NPM. Ele também é de software livre nodo GitHub .

Para importar o Vue para seu aplicativo Web, adicione as importações listadas abaixo.

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

Inserir o relatório com o Vue

Este exemplo mostra como inserir um relatório do Power BI usando o Vue. Abaixo do exemplo está uma descrição de cada componente no exemplo de código.

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

A lista a seguir inclui descrições ou informações adicionais para cada componente no exemplo de snippet de código.

  • embedConfig – define o conteúdo que você está inserindo e especifica as configurações do conteúdo. A configuração de inserção é alterada quando você inscreve os seguintes itens do Power BI:

  • cssClassName – fornece ao item inserido nomes de classe CSS que permitem controlar o estilo do iframe inserido usando CSS.

  • phasedEmbedding – melhora a experiência do usuário final, proporcionando aos desenvolvedores mais flexibilidade para a inserção de relatório de fase. Consulte Usar de inserção em fases para obter mais informações.

  • eventHandlers – um objeto de mapa para nomes de eventos e seus manipuladores. Consulte Como lidar com eventos para obter mais informações.

Inicializar um relatório do Power BI

powerbi.bootstrap é um método usado para ajudar os desenvolvedores a inserir itens do Power BI mais rapidamente e obter um melhor desempenho. Para obter mais informações, consulte Usar bootstrap para obter um melhor desempenho.

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

Para inserir o relatório após o inicialização, atualize o embedConfig (com pelo menos accessToken e embedUrl).

Demonstração do Vue

O repositório Vue inclui uma demonstração que insira um relatório de exemplo usando o componente PowerBIReportEmbed. Ele demonstra o fluxo completo da inicialização do relatório até a inserção e atualização do relatório inserido. Ele também demonstra como usar a biblioteca de de criação de relatório do powerbi, permitindo que o usuário altere o tipo de visual de um relatório usando o botão de tipo visual Alterar. Ele também define um evento 'DataSelected'.

Para obter mais informações, consulte a seção de demonstração do arquivo leiame .

Um gif animado que mostra a Demonstração do Power BI Vue.

Executar a demonstração

A demonstração é uma subpasta no repositório. Para executar a demonstração no localhost, siga estas etapas:

  1. Execute os seguintes comandos:

    npm run demo

  2. Para exibir no navegador, redirecione-o para http:/localhost:3000/.

Conteúdo relacionado