在 Vue 應用程式中內嵌 Power BI 內容

Vue 是用來建置前端使用者介面和網站的 JavaScript 架構。 Vue 元件可讓您簡單地在 Vue 應用程式中內嵌 Power BI 內容，讓您充分利用 Vue 和 Power BI 內嵌內容。

Power BI vue.js 連結庫可讓您將下列 Power BI 專案內嵌至您的 Vue 應用程式：

報告
儀錶板
儀錶板磚
報表視覺效果
問與答
編頁報表

如何在 Vue Web 應用程式中內嵌 Power BI 內容

本節說明如何將 Vue 匯入您的應用程式，並用它來內嵌 Power BI 報表。

如需詳細的使用方式資訊，請參閱 Power BI Vue 自述檔檔案。

匯入 Vue 連結庫

您可以在 NPM上找到 Power BI Vue 元件。它也開放原始碼 GitHub。

若要將 Vue 匯入至您的 Web 應用程式，請新增下面所列的匯入。

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 的樣式。
階段dEmbedding - 藉由讓開發人員更有彈性地進行階段報表內嵌，以改善終端用戶的體驗。如需詳細資訊，請參閱使用階段式內嵌。
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』事件。

如需詳細資訊，請參閱自述檔檔案的示範一節。

顯示Power BI Vue示範的動畫gif。

執行示範

示範是存放庫中的子資料夾。若要在 localhost 上執行示範，請遵循下列步驟：

執行下列命令：
```
npm run demo
```
若要在瀏覽器中檢視，請將它重新導向至 http:/localhost:3000/。

Last updated on 2024-10-25