如何在宿主应用移动端布局下展示嵌入式Power BI报表的所有分页

问题说明 #

该现象是Power BI嵌入式移动端布局的默认特性：

• Web布局下默认展示原生页面标签栏
  
• 移动端布局下为了节省内容展示空间，官方默认隐藏了原生页面标签栏，无后台配置项可以直接开启
  

实现方案 #

无需调整Power BI服务端配置，直接在Angular端实现自定义导航即可解决，步骤如下：

1. 前置依赖确认 #

确保项目已安装Power BI嵌入式相关客户端库：

npm install powerbi-client powerbi-client-angular

2. 组件模板代码示例 #

<!-- Power BI 报表嵌入组件 -->
<powerbi-report
  [embedConfig]="reportConfig"
  [cssClassName]="reportClass"
  (loaded)="onReportLoaded($event)"
></powerbi-report>

<!-- 移动端自定义页面导航栏 -->
<div class="mobile-page-nav" *ngIf="isMobile && reportPages.length">
  <span
    *ngFor="let page of reportPages"
    class="nav-item"
    [class.active]="page.isActive"
    (click)="switchPage(page)"
  >
    {{page.displayName}}
  </span>
</div>

3. 组件逻辑代码示例 #

import { Component, OnInit } from '@angular/core';
import { Report, Page } from 'powerbi-client';

@Component({
  selector: 'app-powerbi-embed',
  templateUrl: './powerbi-embed.component.html',
  styleUrls: ['./powerbi-embed.component.css']
})
export class PowerbiEmbedComponent implements OnInit {
  reportConfig: any;
  reportClass = 'report-container';
  isMobile = window.innerWidth < 768;
  reportPages: Page[] = [];
  private reportInstance: Report | null = null;

  ngOnInit(): void {
    // 初始化嵌入配置，移动端布局需要指定layoutType为1
    this.reportConfig = {
      type: 'report',
      id: '你的报表ID',
      embedUrl: '你的报表嵌入URL',
      accessToken: '你的嵌入令牌',
      settings: {
        layoutType: this.isMobile ? 1 : 0, // 1对应移动端布局，0对应默认Web布局
        navContentPaneEnabled: false,
        panes: {
          pageNavigation: {
            visible: false // 隐藏原生导航，统一用自定义导航
          }
        }
      }
    };
  }

  onReportLoaded(event: any): void {
    this.reportInstance = event.detail as Report;
    // 加载完成后获取所有页面
    this.reportInstance.getPages().then(pages => {
      this.reportPages = pages.map(page => ({
        ...page,
        isActive: page.isActive
      }));
    });
  }

  switchPage(targetPage: Page): void {
    if (!this.reportInstance) return;
    targetPage.setActive().then(() => {
      // 更新激活状态
      this.reportPages = this.reportPages.map(page => ({
        ...page,
        isActive: page.name === targetPage.name
      }));
    });
  }
}

4. 导航栏样式参考（可选） #

.mobile-page-nav {
  display: flex;
  overflow-x: auto;
  padding: 8px 16px;
  background: #fff;
  border-top: 1px solid #eaecef;
  gap: 16px;
}
.nav-item {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}
.nav-item.active {
  background: #0078d4;
  color: #fff;
}

注意事项 #

• 嵌入配置中需要明确指定移动端布局对应的layoutType为1，否则不会触发移动端适配
• 如果你同时需要支持Web和移动端，可以通过屏幕宽度判断动态切换布局类型和导航栏的显隐
• 自定义导航的样式可以根据你的应用设计风格调整，也可以做成侧边抽屉等其他形式

内容的提问来源于stack exchange，提问作者eloga