npm 包 powerbi-ng2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Power BI 是由微软公司推出的一款商业智能工具，主要用于数据分析和可视化呈现，同时也支持大规模数据集成和数据处理。而 powerbi-ng2 就是一个基于 Power BI Embed API 的 npm 包，提供了在 AngularJS 2.x 中集成 Power BI 的功能。

相比于原生的 Power BI Embed API，powerbi-ng2 更加方便、易用，使得开发人员能够更加快速的集成和应用 Power BI 在自己的 AngularJS 2.x 项目中。

本文主要介绍 powerbi-ng2 的基本使用方法和常见问题解决方法。

安装

安装 powerbi-ng2 的方式很简单，直接通过 npm 安装即可：

npm install powerbi-ng2 --save

安装完成后，添加 powerbi-ng2 到应用程序中：

import { PowerBiModule } from 'powerbi-ng2';

@NgModule({
  imports: [
    PowerBiModule
  ]
})

快速入门

创建配置

在创建 Power BI 嵌入时，需要传入两个必要参数，以及两个可选参数：

embedConfiguration: {
  type: 'report', // 可选项："report" / "dashboard"
  id: string, // Power BI 工作区的报告或仪表板 ID
  embedUrl: string, // Power BI 工作区的报告或仪表板 URL
  tokenType?: models.TokenType, // 可选项："Embed" / "Aad"
  accessToken?: string // 嵌入的访问令牌
}

其中，type 参数为 report 或 dashboard，表示嵌入的是报告还是仪表板。id 参数为 Power BI 工作区的报告或仪表板 ID，可以通过 Power BI 门户页面获取。embedUrl 参数为 Power BI 工作区的报告或仪表板 URL。

基础嵌入

使用 powerbi-ng2 进行嵌入非常简单，只需在 HTML 中添加一个 <powerbi-report> 或 <powerbi-dashboard> 标签，然后传入配置即可。

<powerbi-report [embedUrl]="reportEmbedConfig.embedUrl" [accessToken]="reportEmbedConfig.accessToken" [type]="reportEmbedConfig.type" [id]="reportEmbedConfig.id"></powerbi-report>

<powerbi-dashboard [embedUrl]="dashboardEmbedConfig.embedUrl" [accessToken]="dashboardEmbedConfig.accessToken" [type]="dashboardEmbedConfig.type" [id]="dashboardEmbedConfig.id"></powerbi-dashboard>

高级嵌入

在嵌入 Power BI 前，我们可以进行一些自定义的操作，比如获取报告或仪表板的元素信息、修改样式和事件绑定等。以下是一些常用的高级嵌入技巧：

获取元素信息

Power BI 嵌入后，我们可以获取报告或仪表板的 DOM 元素，并且进行操作。

-- -------------------- ---- -------
------------
  --------- ------------------
  ------------ -------------------------------
  ---------- -------------------------------
--
------ ----- ------------------- ---------- ------ -
  ----------------------- - ------- ---- -- ---------- -----------

  ---------- -
    ----- ------------- - -----------------------------
    ----- ------ - ---------------------------- ------------------------

    ------------------- -- -- -
      ----- ----- - ------------------ -- -------
      --------------------------- -- -----
      -------------------------------- -- ---------------------- -- -------
    ---
  -
-

在页面 HTML 中，我们需要为 powerbi-report 标签添加一个本地引用，并用 @ViewChild 装饰器将其注入到组件中，以便获取元素信息。

<powerbi-report #reportDiv [embedUrl]="reportEmbedConfig.embedUrl" [accessToken]="reportEmbedConfig.accessToken" [type]="reportEmbedConfig.type" [id]="reportEmbedConfig.id"></powerbi-report>

修改样式

如果想要为 Power BI 报告或仪表板添加一些自定义样式，可以使用 Power BI 提供的 applyTheme 方法，并传入修改的样式对象。

-- -------------------- ---- -------
----- ----------- - -
  ---------- -
    ------------- -
      ---- -
        ---- -
          - ----- ---- ------ - --------- ------ - --
          - ----- ---- ------ - ----------- ------ - --
          - ----- ---- ------ - ------ ------ - --
          - ----- ---- ------ - ---------------- --------- - --
        -
      -
    -
  -
--

-------------------------------

事件绑定

使用 Power BI API，可以绑定 Power BI 报告或仪表板中的事件。以下是常用的事件类型：

loaded: 报告或仪表板加载完成时触发。
error: 报告或仪表板加载失败时触发。
dataSelected: 用户选择报表元素时触发

const report = powerbi.embed(reportElement, this.reportEmbedConfig);

report.on('dataSelected', (event: any) => {
    console.log('Data selected: ', event.detail);
});

常见问题

1. 如何获取 Power BI 工作区的报告或仪表板 ID？

在 Power BI 门户中，进入你要嵌入的报告或仪表板，从浏览器地址栏中获取报告或仪表板的 ID。

2. 如何自定义 Power BI 嵌入时，调整 iframe 高度？

powerbi-ng2 为每个嵌入的报告或仪表板提供了一个默认的高度。如果您需要调整高度以适应页面布局，可以使用 CSS 或 JavaScript 来控制嵌入的 iframe 元素的高度。

.powerbi-frame {
  height: 500px !important; // 设置高度
}

const reportElement = this.reportDiv.nativeElement;
const report = powerbi.embed(reportElement, this.reportEmbedConfig);

report.on('loaded', () => {
    const iFrameElement = report.getElement();
    iFrameElement.style.height = '500px'; // 设置高度
});

结语

以上就是 powerbi-ng2 的基本使用方法和常见问题解决方法，希望本文能够对您的 AngularJS 2.x 开发工作有所帮助。如果您对 Power BI 的嵌入还有其他问题或需求，也欢迎在评论区留言，让我们一起学习和进步。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055e3481e8991b448dbb0f