如何在Salesforce LWC中实现PowerBI嵌入报表的标签切换？

要实现嵌入PowerBI报表的标签页切换，需要从PowerBI API获取报表的页面（标签页）数据，再通过PowerBI Embedded JavaScript API在LWC中控制页面切换。以下是具体的修改步骤：

一、修改Apex类获取报表页面数据 #

扩展PowerBiEmbedManager类，新增获取报表页面的逻辑，并将页面数据返回给LWC：

1. 新增报表页面数据类 #

在PowerBiEmbedManager类中添加内部类，用于解析PowerBI API返回的页面数据：

public class PowerBiReportPage {
    @AuraEnabled
    public String id { get; set; }
    @AuraEnabled
    public String displayName { get; set; }
    @AuraEnabled
    public String name { get; set; }
}

2. 更新PowerBiReportData类 #

在PowerBiReportData类中添加页面列表字段，存储报表的所有标签页信息：

public class PowerBiReportData    {
  @AuraEnabled
    public String workspaceId { get; set; } 
  @AuraEnabled
    public String reportId { get; set; } 
  @AuraEnabled
    public String name { get; set; } 
  @AuraEnabled
    public String embedUrl { get; set; } 
  @AuraEnabled
    public String embedToken { get; set; } 
  @AuraEnabled
    public DateTime embedTokenExpires { get; set; } 
    @AuraEnabled
    public String error { get; set; } 
  @AuraEnabled // 新增字段：报表页面列表
    public List<PowerBiReportPage> reportPages { get; set; }
 }

3. 在getEmbeddingDataForReport方法中添加获取页面的逻辑 #

在获取报表基本信息和嵌入token后，调用PowerBI API获取报表页面列表，并赋值给PowerBiReportData的reportPages字段：

// 在获取embedToken的代码之后添加以下逻辑
// Call to Power BI Service API to get report pages
HttpRequest reqGetReportPages = new HttpRequest();
reqGetReportPages.setMethod('GET');
String urlGetReportPages = 'https://api.powerbi.com/v1.0/myorg/groups/' + WorkspaceId + '/reports/' + ReportId + '/pages';
reqGetReportPages.setEndpoint(urlGetReportPages);
reqGetReportPages.setHeader('Authorization', 'Bearer ' + access_token);

HttpResponse responseReportPages = http.send(reqGetReportPages);

if(responseReportPages.getStatusCode() != 200){
    System.debug('ERROR --- Getting Report Pages --- ERROR');
    System.debug('Status Code: ' + responseReportPages.getStatusCode());
    powerBiReportData.error = 'Get Report Pages Error: ' + responseReportPages.getStatus();
} else {
    // 解析页面数据
    List<PowerBiReportPage> pages = (List<PowerBiReportPage>)JSON.deserialize(responseReportPages.getBody(), List<PowerBiReportPage>.class);
    powerBiReportData.reportPages = pages;
}

二、修改LWC组件实现标签页切换 #

1. LWC HTML模板 #

添加标签页按钮组和报表嵌入容器：

<template>
    <div if:true={reportData}>
        <!-- 自定义标签页按钮组 -->
        <div class="slds-button-group" role="group">
            <button 
                class="slds-button slds-button_neutral {page.id === activePageId ? 'slds-is-selected' : ''}"
                onclick={handlePageSwitch}
                data-page-id={page.id}
                for:each={reportData.reportPages}
                for:item="page"
                key={page.id}
            >
                {page.displayName}
            </button>
        </div>
        <!-- PowerBI报表嵌入容器 -->
        <div id="reportContainer" class="slds-p-top_medium" style="height: 600px;"></div>
    </div>
    <div if:true={error} class="slds-text-color_error">
        {error}
    </div>
</template>

2. LWC JavaScript控制器 #

加载PowerBI Embedded SDK，初始化报表实例，并实现标签页切换逻辑：

import { LightningElement, wire, track } from 'lwc';
import getEmbeddingDataForReport from '@salesforce/apex/PowerBiEmbedManager.getEmbeddingDataForReport';

export default class PowerBiReportEmbed extends LightningElement {
    @track reportData;
    @track error;
    @track activePageId;
    reportInstance;

    // 替换为实际的WorkspaceId和ReportId
    workspaceId = '你的工作区ID';
    reportId = '你的报表ID';

    connectedCallback() {
        this.loadPowerBiScript();
    }

    @wire(getEmbeddingDataForReport, { WorkspaceId: '$workspaceId', ReportId: '$reportId' })
    wiredReportData({ error, data }) {
        if (data) {
            this.reportData = data;
            this.error = undefined;
            if (window.powerbi) this.initReport();
        } else if (error) {
            this.error = error.body.message;
            this.reportData = undefined;
        }
    }

    loadPowerBiScript() {
        const script = document.createElement('script');
        script.src = 'https://microsoft.github.io/PowerBI-JavaScript/dist/powerbi.min.js';
        script.onload = () => {
            if (this.reportData) this.initReport();
        };
        document.body.appendChild(script);
    }

    initReport() {
        const embedConfig = {
            type: 'report',
            id: this.reportData.reportId,
            embedUrl: this.reportData.embedUrl,
            tokenType: window.powerbi.models.TokenType.Embed,
            accessToken: this.reportData.embedToken,
            settings: {
                panes: {
                    pageNavigation: { visible: false } // 隐藏PowerBI自带导航栏，使用自定义标签页
                }
            }
        };

        const container = this.template.querySelector('#reportContainer');
        this.reportInstance = window.powerbi.embed(container, embedConfig);

        // 报表加载完成后设置默认激活标签页
        this.reportInstance.on('loaded', () => {
            if (this.reportData.reportPages.length > 0) {
                this.activePageId = this.reportData.reportPages[0].id;
            }
        });
    }

    handlePageSwitch(event) {
        const pageId = event.target.dataset.pageId;
        this.activePageId = pageId;
        if (this.reportInstance) {
            this.reportInstance.setPage(pageId)
                .catch(err => console.error('切换页面失败:', err));
        }
    }
}

三、注意事项 #

• 权限验证：确保Salesforce使用的PowerBI服务主体拥有该报表的Read权限，PowerBI API调用权限配置正确。
• CSP设置：在Salesforce的CSP信任站点中添加https://microsoft.github.io及PowerBI相关域名，避免脚本加载被阻止。
• Token有效期：嵌入token存在有效期限制，需处理token过期后的刷新逻辑。

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