Sdílet prostřednictvím

Vložení položky Power BI do aplikace React

  • Článek

Při vytváření analytické aplikace Power BI Embedded vám React pomůže optimalizovat výkon s integrací bootstrap a současně používat všechna rozhraní API na straně klienta, včetně vytváření sestav. Zjednodušuje také správu životního cyklu vkládání Power BI do vaší aplikace. Komponenta Power BI React podporuje JavaScript i TypeScript a pomáhá vkládat analýzy do webové aplikace React.

Knihovna React umožňuje vložit následující položky Power BI:

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

Vložení položky Power BI do webové aplikace React

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

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

Import knihovny React

Komponentu Power BI React najdete na NPM. Je také opensourcová na GitHubu .

Pokud chcete do webové aplikace importovat React, přidejte uvedené importy:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Vložení sestavy pomocí Reactu

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

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

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

  • konfigurace vložení – 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:

  • 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í.

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

  • getEmbedComponent – zpětné volání, které vám pomůže získat vloženou instanci, abyste mohli používat všechna rozhraní API, která umožňuje klientská knihovna Power BI. Například při vkládání sestavy získáte instanci třídy Sestava.

Bootstrap a komponenta

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.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

React demo

Úložiště React obsahuje ukázku, která znázorňuje kompletní tok spouštění sestavy, vkládání a aktualizace vložené sestavy. Ukazuje také použití knihovny powerbi pro vytváření sestav odstraněním vizuálu ze sestavy po kliknutí na tlačítko Odstranit vizuál.

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

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

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:

  1. Spusťte následující příkazy:

    npm run install:demo
npm run demo

  2. Pokud chcete zobrazit v prohlížeči, přesměrujte ho na http:/localhost:8080/.

Související obsah