Inserción de contenido de Power BI en una aplicación de Vue

2024-10-25

Vue es un marco de JavaScript para crear interfaces de usuario front-end y sitios web. El componente Vue le permite insertar contenido de Power BI en la aplicación de Vue simplemente, lo que le permite aprovechar al máximo tanto Vue como Power BI insertado.

La biblioteca de vue.js de Power BI le permite insertar los siguientes elementos de Power BI en la aplicación Vue:

Informes
Paneles
Iconos del panel
Objetos visuales de informe
Q&A
Informes paginados

Inserción de contenido de Power BI en una aplicación web de Vue

En esta sección se describe cómo importar Vue en la aplicación y usarlo para insertar un informe de Power BI.

Para obtener información detallada sobre el uso, consulte el archivo Léame de Power BI Vue .

Importación de la biblioteca de Vue

Puede encontrar componentes de Power BI Vue en NPM. También es de código abierto en GitHub.

Para importar Vue en la aplicación web, agregue las importaciones que se enumeran a continuación.

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

Inserción del informe con Vue

En este ejemplo se muestra cómo insertar un informe de Power BI mediante Vue. Debajo del ejemplo se muestra una descripción de cada componente del ejemplo 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>

En la lista siguiente se incluyen descripciones o información adicional para cada componente del ejemplo de fragmento de código.

embedConfig: define el contenido que va a insertar y especifica la configuración del contenido. La configuración de inserción cambia al insertar los siguientes elementos de Power BI:
- informe
- visual de informe de
- de informe paginado
- Q independiente&un visual
- panel de
- icono panel de
cssClassName: proporciona al elemento incrustado un nombre de clase CSS que le permite controlar el estilo del iframe incrustado mediante CSS.
phasedEmbedding: mejora la experiencia del usuario final al proporcionar a los desarrolladores más flexibilidad para insertar informes por fases. Consulte Uso de de inserción por fases para obtener más información.
eventHandlers: un objeto de mapa para los nombres de evento y sus controladores. Consulte Cómo controlar eventos para obtener más información.

Arranque de un informe de Power BI

powerbi.bootstrap es un método que se usa para ayudar a los desarrolladores a insertar elementos de Power BI más rápido y obtener un mejor rendimiento. Para obtener más información, consulte Uso del arranque para mejorar el rendimiento.

<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 insertar el informe después del arranque, actualice embedConfig (con al menos accessToken e embedUrl).

Demostración de Vue

El repositorio de Vue incluye una demostración que inserta un informe de ejemplo mediante el componente PowerBIReportEmbed. Muestra el flujo completo desde el arranque del informe para insertar y actualizar el informe insertado. También muestra cómo usar el biblioteca de creación de informes de powerbi habilitando al usuario para cambiar el tipo de objeto visual de un informe mediante el botón Cambiar tipo de objeto visual . También establece un evento "DataSelected".

Para obtener más información, consulte la sección de demostración de del archivo léame.

gif animado que muestra la demostración de Power BI Vue.

Ejecución de la demostración

La demostración es una subcarpeta en el repositorio. Para ejecutar la demostración en localhost, siga estos pasos:

Ejecute los comandos siguientes:
```
npm run demo
```
Para ver en el explorador, redirijalo a http:/localhost:3000/.

Compartir a través de