如何在Xamarin中使用PDF.js从URL及Web API显示PDF

嘿，很高兴你已经搞定了本地PDF的显示！针对你现在的两个需求——从返回二进制数据的Web API加载PDF，还有在Xamarin里用PDF.js通过URL展示PDF，我给你整理了具体的实现步骤和代码调整方案：

要处理API返回的二进制PDF数据，核心思路是把二进制数据转换成PDF.js能识别的资源形式，这里有两种常用方案：

方案1：转成Base64字符串直接加载（适合小文件） #

把二进制数据编码成Base64，然后通过data:协议传给PDF.js的viewer：

public pdfjsPage(string apiUrl) {
    InitializeComponent();
    _ = LoadPdfFromApiAsync(apiUrl);
}

private async Task LoadPdfFromApiAsync(string apiUrl) {
    try {
        using (var httpClient = new HttpClient()) {
            // 从API获取二进制PDF数据
            var pdfBytes = await httpClient.GetByteArrayAsync(apiUrl);
            
            // 转成Base64字符串
            var base64Pdf = Convert.ToBase64String(pdfBytes);
            // 拼接PDF.js viewer的访问地址（替换成你实际的PDF.js路径）
            var pdfJsViewerUrl = $"https://your-pdfjs-folder/web/viewer.html?file=data:application/pdf;base64,{base64Pdf}";
            
            // 给WebView设置源
            PdfWebView.Source = new UrlWebViewSource { Url = pdfJsViewerUrl };
        }
    } catch (Exception ex) {
        await DisplayAlert("加载失败", $"无法加载PDF：{ex.Message}", "确定");
    }
}

方案2：保存为本地临时文件加载（适合大文件） #

如果PDF文件较大，Base64会导致体积膨胀，更推荐先把二进制数据存成本地临时文件，再用文件路径加载：

public pdfjsPage(string apiUrl) {
    InitializeComponent();
    _ = LoadPdfFromApiAsync(apiUrl);
}

private async Task LoadPdfFromApiAsync(string apiUrl) {
    try {
        using (var httpClient = new HttpClient()) {
            var pdfBytes = await httpClient.GetByteArrayAsync(apiUrl);
            
            // 依赖平台服务保存临时文件（你的代码里已经用到了ILocalFileProvider，这里补充逻辑）
            var localFileProvider = DependencyService.Get<ILocalFileProvider>();
            if (localFileProvider == null) {
                await DisplayAlert("错误", "无法获取本地文件服务", "确定");
                return;
            }
            
            var tempFilePath = await localFileProvider.SaveTempFileAsync(pdfBytes, "temp_pdf.pdf");
            // 编码文件路径，避免特殊字符问题
            var encodedFilePath = Uri.EscapeDataString(tempFilePath);
            var pdfJsViewerUrl = $"https://your-pdfjs-folder/web/viewer.html?file={encodedFilePath}";
            
            PdfWebView.Source = new UrlWebViewSource { Url = pdfJsViewerUrl };
        }
    } catch (Exception ex) {
        await DisplayAlert("加载失败", $"无法加载PDF：{ex.Message}", "确定");
    }
}

如果你的Web API直接返回可访问的PDF文件URL（不是二进制接口），实现会更简单：

public pdfjsPage(string pdfUrl) {
    InitializeComponent();
    
    // 对PDF URL进行URL编码，避免特殊字符导致加载失败
    var encodedPdfUrl = Uri.EscapeDataString(pdfUrl);
    // 替换成你实际的PDF.js viewer路径（建议把PDF.js静态文件嵌入项目，比如Android的Assets文件夹）
    var pdfJsViewerUrl = $"file:///android_asset/pdfjs/web/viewer.html?file={encodedPdfUrl}";
    
    PdfWebView.Source = new UrlWebViewSource { Url = pdfJsViewerUrl };
}

• 嵌入PDF.js到项目：建议把PDF.js的静态文件（viewer.html、viewer.js、相关css等）复制到Xamarin项目的对应目录（Android放Assets，iOS放Resources），这样不需要依赖外部网络，加载更稳定。
• 权限配置：Android需要在AndroidManifest.xml中添加网络权限<uses-permission android:name="android.permission.INTERNET" />；如果涉及本地文件读取，还要配置对应的文件权限。

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