在 Vue 应用程序中嵌入 Power BI 内容

Vue 是用于生成前端用户界面和网站的 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 自述文件文件。

导入 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 的样式。
分阶段化 - 通过让开发人员更灵活地分阶段报表嵌入来提高最终用户的体验。有关详细信息，请参阅使用分阶段嵌入。
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-07-17