次の方法で共有

Vue アプリケーションに Power BI コンテンツを埋め込む

Vue は、フロントエンド ユーザー インターフェイスと Web サイトを構築するための JavaScript フレームワークです。 Vue コンポーネントを使用すると、Vue アプリケーションに Power BI コンテンツを簡単に埋め込むことができます。これにより、Vue と Power BI の両方を埋め込むことができます。

Power BI vue.js ライブラリを使用すると、次の Power BI 項目を Vue アプリケーションに埋め込むことができます。

  • レポート
  • ダッシュ ボード
  • ダッシュボード タイル
  • レポートビジュアル
  • Q&A
  • ページ分割されたレポート

Vue Web アプリに Power BI コンテンツを埋め込む方法

このセクションでは、アプリに Vue をインポートし、それを使用して Power BI レポートを埋め込む方法について説明します。

使用方法の詳細については、Power BI Vue readme ファイルを参照してください。

Vue ライブラリをインポートする

Power BI Vue コンポーネントは、NPMにあります。 また、GitHubでオープン ソースです。

Web アプリに Vue をインポートするには、以下に示すインポートを追加します。

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

Vue を使用してレポートを埋め込む

この例では、Vue を使用して Power BI レポートを埋め込む方法を示します。 次の例は、コード サンプル内の各コンポーネントの説明です。

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

次の一覧には、コード スニペットの例の各コンポーネントの説明または追加情報が含まれています。

  • embedConfig - 埋め込むコンテンツを定義し、コンテンツの設定を指定します。 埋め込み構成は、次の Power BI 項目を埋め込むと変更されます。

  • cssClassName - 埋め込みアイテムに CSS クラス名を指定します。これにより、CSS を使用して埋め込まれた iframe のスタイルを制御できます。

  • phasedEmbedding - 開発者がレポート埋め込みをフェーズ化する柔軟性を高めることで、エンド ユーザーのエクスペリエンスを向上させます。 詳細については、「段階的埋め込み を使用する」を参照してください。

  • eventHandlers - イベント名とそのハンドラーのマップ オブジェクト。 詳細については、「イベント を処理する方法」を参照してください。

Power BI レポートのブートストラップ

powerbi.bootstrap は、開発者が Power BI 項目をより迅速に埋め込み、パフォーマンスを向上させるために使用される方法です。 詳細については、「ブートストラップを使用してパフォーマンスを向上する」を参照してください。

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

ブートストラップ後にレポートを埋め込むには、embedConfig を更新します (少なくとも accessToken と embedUrl を使用)。

Vue デモ

Vue リポジトリには、PowerBIReportEmbed コンポーネントを使用してサンプル レポートを埋め込むデモが含まれています。 レポートのブートストラップから埋め込みレポートの埋め込みと更新までの完全なフローを示します。 また、powerbi レポート作成 ライブラリを使用する方法についても説明します。ユーザーは、[ビジュアルの種類の変更] ボタンを使用して、レポートからビジュアルの種類を変更 。 また、"DataSelected" イベントも設定します。

詳細については、readme ファイルの「demo」セクションを参照してください。

Power BI Vue デモを示すアニメーション GIF。

デモを実行する

デモはリポジトリ内のサブフォルダーです。 localhost でデモを実行するには、次の手順に従います。

  1. 次のコマンドを実行します。

    npm run demo

  2. ブラウザーで表示するには、http:/localhost:3000/にリダイレクトします。

関連コンテンツ