使用powerbi-client-angular-wrapper嵌入PowerBI Embedded报表后，如何实现全屏查看与打印？

一、PowerBI Embedded报表的打印方法 #

PowerBI Embedded 支持两种实用的打印方式：

• 原生SDK打印API：调用报表实例的print()方法，触发PowerBI内置打印流程，自动适配报表布局与分页，体验最优。
• 浏览器原生打印：若需自定义打印区域，可获取报表容器DOM元素，结合window.print()实现，但需额外调整CSS过滤无关内容。

二、powerbi-client-angular-wrapper 下的全屏与打印实现 #

1. 全屏查看功能 #

通过封装的组件调用SDK的fullscreen()方法即可切换全屏，实现步骤如下：

模板代码（HTML）

<div class="report-controls">
  <button (click)="toggleFullscreen()">切换全屏</button>
  <button (click)="printReport()">打印报表</button>
</div>
<powerbi-report
  [embedConfig]="embedConfig"
  (embedded)="onReportEmbedded($event)"
></powerbi-report>

组件逻辑（TypeScript）

import { Component } from '@angular/core';
import { models } from 'powerbi-client';

@Component({
  selector: 'app-embedded-report',
  templateUrl: './embedded-report.component.html'
})
export class EmbeddedReportComponent {
  // 替换为你的实际嵌入参数
  embedConfig: models.IEmbedConfiguration = {
    type: 'report',
    id: 'YOUR_REPORT_ID',
    embedUrl: 'YOUR_EMBED_URL',
    accessToken: 'YOUR_ACCESS_TOKEN',
    settings: {
      panes: {
        pageNavigation: { visible: true }
      }
    }
  };

  private reportInstance: models.IReport | undefined;

  // 报表嵌入完成后获取实例
  onReportEmbedded(event: any) {
    this.reportInstance = event.report;
  }

  // 切换全屏
  toggleFullscreen() {
    if (!this.reportInstance) return;
    
    this.reportInstance.fullscreen()
      .catch(err => console.error('全屏切换失败:', err));
  }
}

2. 嵌入式报表打印实现 #

集成SDK的print()方法触发打印，直接在上述组件中添加逻辑：

// 打印报表
printReport() {
  if (!this.reportInstance) return;
  
  this.reportInstance.print()
    .catch(err => console.error('打印失败:', err));
}

额外说明 #

• 权限要求：确保访问令牌（accessToken）具备ViewContent和ExportContent权限，否则打印/导出功能会失效。
• 备选方案：若需更灵活的打印格式，可调用exportToPDF()导出后再打印：

  exportAndPrint() {
    if (!this.reportInstance) return;
    
    this.reportInstance.exportToPDF(models.ExportPDFOptions.Default)
      .then(result => {
        const downloadUrl = window.URL.createObjectURL(result.data);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = 'report.pdf';
        link.click();
        window.URL.revokeObjectURL(downloadUrl);
      })
      .catch(err => console.error('PDF导出失败:', err));
  }
  

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