Vložení obsahu Power BI do aplikace Vue

2024-10-25

Vue je javascriptová architektura pro vytváření front-endových uživatelských rozhraní a webů. Komponenta Vue umožňuje jednoduše vkládat obsah Power BI do aplikace Vue, což vám umožní maximálně využít Vue i Power BI Embedded.

Knihovna power BI vue.js umožňuje vložit do aplikace Vue následující položky Power BI:

Zprávy
Řídicích panelů
Dlaždice řídicího panelu
Vizuály sestav
Q&A
Stránkované sestavy

Jak vložit obsah Power BI do webové aplikace Vue

Tato část popisuje, jak importovat Vue do aplikace a jak ji použít k vložení sestavy Power BI.

Podrobné informace o využití najdete v souboru souboru Readme Power BI Vue.

Import knihovny Vue

Komponenty Vue Power BI najdete na NPM. Je také opensourcová na GitHubu .

Pokud chcete importovat Vue do webové aplikace, přidejte níže uvedené importy.

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

Vložení sestavy pomocí Vue

Tento příklad ukazuje, jak vložit sestavu Power BI pomocí Vue. Pod příkladem je popis jednotlivých komponent v ukázce kódu.

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

Následující seznam obsahuje popisy nebo další informace pro každou komponentu v příkladu fragmentu kódu.

embedConfig – definuje obsah, který vkládáte, a určuje nastavení obsahu. Konfigurace vložení se změní při vkládání následujících položek Power BI:
- Sestava
- vizuálu sestavy
- stránkované sestavy
- samostatného vizuálu Q&A
- Palubní deska
- dlaždice řídicího panelu
cssClassName – poskytuje vložené položce názvy tříd CSS, které umožňují řídit styl vloženého prvku iframe pomocí šablon stylů CSS.
phasedEmbedding – zlepšuje prostředí koncového uživatele tím, že vývojářům poskytuje větší flexibilitu pro vkládání sestav fází. Další informace najdete v tématu Použití fázovaného vkládání.
obslužné rutiny událostí – objekt mapy pro názvy událostí a jejich obslužné rutiny. Další informace najdete v tématu Zpracování událostí.

Spuštění sestavy Power BI

powerbi.bootstrap je metoda, která vývojářům pomáhá rychleji vkládat položky Power BI a dosáhnout lepšího výkonu. Další informace najdete v tématu Použití bootstrapu pro lepší výkon.

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

Pokud chcete sestavu vložit po spuštění, aktualizujte embedConfig (alespoň accessToken a embedUrl).

Ukázka Vue

Úložiště Vue obsahuje ukázku, která vloží ukázkovou sestavu pomocí komponenty PowerBIReportEmbed. Ukazuje úplný tok od spuštění sestavy až po vložení a aktualizaci vložené sestavy. Ukazuje také, jak používat knihovnu pro vytváření sestav Powerbi tím, že uživateli umožníte změnit typ vizuálu ze sestavy pomocí tlačítka Změnit typ vizuálu. Nastaví také událost DataSelected.

Další informace najdete v části ukázky souboru readme.

animovaný gif, který zobrazuje ukázku Vue v Power BI.

Spuštění ukázky

Ukázka je podsložka v úložišti. Pokud chcete spustit ukázku na místním hostiteli, postupujte takto:

Spusťte následující příkazy:
```
npm run demo
```
Pokud chcete zobrazit v prohlížeči, přesměrujte ho na http:/localhost:3000/.

Sdílet prostřednictvím