如何在Xamarin.Forms中嵌入并显示Power BI报表？

直接将Power BI的EmbedUrl加载到WebView无法正常显示，因为Power BI嵌入需要通过官方JavaScript SDK完成身份验证和报表渲染，而非直接访问EmbedUrl。以下是具体解决步骤：

1. 验证Access Token权限 #

确保你的Access Token包含正确的Power BI嵌入权限：

• 检查token的scope是否包含https://analysis.windows.net/powerbi/api/Report.Read.All或Report.ReadWrite.All
• 可通过JWT解码工具查看token的Claims，确认权限有效

2. 使用Power BI JavaScript SDK嵌入报表 #

创建包含Power BI SDK的HTML模板，通过注入token、EmbedUrl等参数渲染报表，而非直接加载EmbedUrl。

示例HTML模板（嵌入到C#代码中） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Power BI报表</title>
    <!-- 引入Power BI官方JS SDK -->
    <script src="https://microsoft.github.io/PowerBI-JavaScript/dist/powerbi.min.js"></script>
</head>
<body style="margin:0; padding:0;">
    <div id="reportContainer" style="width:100%; height:100vh;"></div>

    <script>
        // 嵌入配置参数
        var embedConfig = {
            type: 'report',
            id: '{REPORT_ID}',
            embedUrl: '{EMBED_URL}',
            accessToken: '{ACCESS_TOKEN}',
            settings: {
                panes: {
                    filters: { visible: false },
                    pageNavigation: { visible: true }
                }
            }
        };

        // 渲染报表
        var container = document.getElementById('reportContainer');
        var report = powerbi.embed(container, embedConfig);

        // 监听错误事件
        report.on('error', function(event) {
            console.error('报表加载错误:', event.detail);
        });
    </script>
</body>
</html>

3. 修改Xamarin WebView加载逻辑 #

替换HTML模板中的占位符，将完整HTML加载到WebView中：

protected override async void OnAppearing()
{
    base.OnAppearing();

    Debug.WriteLine("#########");
    Debug.WriteLine("# Start #");
    Debug.WriteLine("#########");

    string accessToken = await ObtenerTokenDeAcceso(); 
    string embedUrl = await ObtenerEmbedUrl(accessToken);

    if (!string.IsNullOrEmpty(embedUrl) && !string.IsNullOrEmpty(accessToken))
    {
        // 定义HTML模板
        string htmlTemplate = @"<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Power BI报表</title>
    <script src='https://microsoft.github.io/PowerBI-JavaScript/dist/powerbi.min.js'></script>
</head>
<body style='margin:0; padding:0;'>
    <div id='reportContainer' style='width:100%; height:100vh;'></div>

    <script>
        var embedConfig = {
            type: 'report',
            id: '{REPORT_ID}',
            embedUrl: '{EMBED_URL}',
            accessToken: '{ACCESS_TOKEN}',
            settings: {
                panes: {
                    filters: { visible: false },
                    pageNavigation: { visible: true }
                }
            }
        };

        var container = document.getElementById('reportContainer');
        var report = powerbi.embed(container, embedConfig);

        report.on('error', function(event) {
            console.error('报表加载错误:', event.detail);
        });
    </script>
</body>
</html>";

        // 替换占位符为实际参数
        htmlTemplate = htmlTemplate.Replace("{REPORT_ID}", reportId)
                                   .Replace("{EMBED_URL}", embedUrl)
                                   .Replace("{ACCESS_TOKEN}", accessToken);

        // 加载HTML到WebView
        powerBIWebView.Source = new HtmlWebViewSource
        {
            Html = htmlTemplate
        };
    }
    else
    {
        Debug.WriteLine("获取EmbedUrl或Access Token失败");
    }

    Debug.WriteLine("#########");
    Debug.WriteLine("#  End  #");
    Debug.WriteLine("#########");
}

4. 配置WebView权限 #

Android平台（MainActivity.cs） #

启用JavaScript和必要的WebView设置：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    // 配置WebView权限
    if (powerBIWebView != null)
    {
        var nativeWebView = powerBIWebView.GetRenderer().View as Android.Webkit.WebView;
        nativeWebView.Settings.JavaScriptEnabled = true;
        nativeWebView.Settings.DomStorageEnabled = true;
        nativeWebView.Settings.AllowFileAccess = true;
    }

    LoadApplication(new App());
}

iOS平台（ViewController.cs） #

启用WKWebView的JavaScript支持：

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    var webViewRenderer = powerBIWebView.GetRenderer() as WkWebViewRenderer;
    webViewRenderer.Configuration.Preferences.JavaScriptEnabled = true;
    webViewRenderer.Configuration.Preferences.JavaScriptCanOpenWindowsAutomatically = true;
}

5. 额外检查项 #

• 确认EmbedUrl格式正确，示例：https://app.powerbi.com/reportEmbed?reportId=xxx&groupId=xxx
• 确保设备可访问Power BI相关域名（app.powerbi.com、microsoft.github.io）
• 通过WebView调试工具（Android Chrome远程调试、iOS Safari调试）查看JS错误日志，定位问题

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