.NET MAUI Blazor Hybrid中WebView显示本地PDF的问题及解决方法

现有操作的问题点 #

1. WebView本地文件权限限制：Android平台上，WebView默认禁止直接访问应用私有目录（如/data/user/0/...）的文件，file://协议无法绕过应用沙箱权限，导致WebView无法读取PDF文件，出现空白。
2. WebView缺乏PDF渲染支持：部分平台的WebView（如部分Android设备的系统WebView）没有内置PDF渲染引擎，即使路径正确，<iframe>/<embed>也无法解析PDF内容。
3. 路径处理不规范：直接拼接file://路径没有考虑平台差异，iOS/Windows平台的本地文件路径格式与Android不同，跨平台场景下会失效。

可行的本地PDF展示方案 #

方案1：基于平台原生控件实现（推荐，性能最优） #

利用MAUI的跨平台能力，封装各平台原生PDF渲染控件，通过自定义组件在Blazor中使用：

• Android：集成android-pdf-viewer库，自定义Handler将MAUI控件映射为原生PDFView。
• iOS：使用PDFKit.PDFView，通过Handler绑定控件属性。
• Windows：使用Windows.UI.Xaml.Controls.PdfView。

示例步骤：

1. 创建自定义MAUI控件NativePdfViewer：

public class NativePdfViewer : View
{
    public static readonly BindableProperty FilePathProperty =
        BindableProperty.Create(nameof(FilePath), typeof(string), typeof(NativePdfViewer));

    public string FilePath
    {
        get => (string)GetValue(FilePathProperty);
        set => SetValue(FilePathProperty, value);
    }
}

2. 针对Android实现Handler：

[assembly: ExportHandler(typeof(NativePdfViewer), typeof(NativePdfViewerHandler))]
namespace YourApp.Platforms.Android
{
    public class NativePdfViewerHandler : ViewHandler<NativePdfViewer, com.github.barteksc.pdfviewer.PDFView>
    {
        protected override com.github.barteksc.pdfviewer.PDFView CreatePlatformView()
        {
            return new com.github.barteksc.pdfviewer.PDFView(Context, null);
        }

        protected override void ConnectHandler(com.github.barteksc.pdfviewer.PDFView platformView)
        {
            base.ConnectHandler(platformView);
            LoadPdf(platformView, VirtualView.FilePath);
        }

        protected override void DisconnectHandler(com.github.barteksc.pdfviewer.PDFView platformView)
        {
            platformView?.Clear();
            base.DisconnectHandler(platformView);
        }

        private void LoadPdf(com.github.barteksc.pdfviewer.PDFView platformView, string filePath)
        {
            if (!string.IsNullOrEmpty(filePath) && File.Exists(filePath))
            {
                platformView.FromFile(new Java.IO.File(filePath))
                    .EnableSwipe(true)
                    .SwipeHorizontal(false)
                    .Load();
            }
        }
    }
}

3. 在Blazor页面中使用：

<NativePdfViewer FilePath="@fileContent.FilePath" Width="100%" Height="100%" />

方案2：Base64编码嵌入HTML（适合小文件） #

读取本地PDF字节流，转换为Base64后通过<embed>标签直接渲染，绕过文件权限问题：

@if (!string.IsNullOrEmpty(PdfBase64))
{
    <embed src="data:application/pdf;base64,@PdfBase64" width="100%" height="100%" type="application/pdf" />
}

@code {
    [Parameter]
    public FileContent fileContent { get; set; }

    private string PdfBase64 = string.Empty;

    protected override void OnInitialized()
    {
        if (File.Exists(fileContent.FilePath) && fileContent.Type == "application/pdf")
        {
            var pdfBytes = File.ReadAllBytes(fileContent.FilePath);
            PdfBase64 = Convert.ToBase64String(pdfBytes);
        }
    }
}

注意：大文件会导致Base64字符串过大，占用过多内存，不建议用于大PDF。

方案3：使用PDF.js在WebView中渲染 #

通过PDF.js库在WebView中渲染PDF，需将PDF.js资源放入wwwroot目录，然后通过JS读取本地文件：

1. 下载PDF.js，将pdf.js、pdf.worker.js放入wwwroot/pdfjs目录。
2. 创建wwwroot/pdfviewer.html：

<!DOCTYPE html>
<html>
<head>
    <script src="/pdfjs/pdf.js"></script>
    <style>
        #pdfContainer { width: 100%; height: 100vh; }
    </style>
</head>
<body>
    <div id="pdfContainer"></div>
    <script>
        window.renderPdf = async (base64Data) => {
            const pdfData = atob(base64Data);
            const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
            const page = await pdf.getPage(1);
            const viewport = page.getViewport({ scale: 1.5 });
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            document.getElementById('pdfContainer').appendChild(canvas);
            await page.render({ canvasContext: context, viewport: viewport });
        };
    </script>
</body>
</html>

3. 在Blazor页面中调用：

<WebView Source="pdfviewer.html" @ref="webViewRef" Width="100%" Height="100%" />

@code {
    [Parameter]
    public FileContent fileContent { get; set; }

    private WebView webViewRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && File.Exists(fileContent.FilePath) && fileContent.Type == "application/pdf")
        {
            var pdfBytes = File.ReadAllBytes(fileContent.FilePath);
            var base64 = Convert.ToBase64String(pdfBytes);
            await webViewRef.EvaluateJavaScriptAsync($"renderPdf('{base64}')");
        }
    }
}

现有代码的临时修复（仅针对Android） #

如果必须用WebView直接加载，Android上需配置WebView允许文件访问，并通过ContentProvider暴露私有文件：

1. 在Android项目中注册ContentProvider，用于访问应用私有文件。
2. 将PdfPath替换为ContentProvider的URI，而非file://路径。

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