在 WebView 问题 (Xamarin.ios) 中查看 PDF

Question

我目前在将本地 pdf 加载到 web 视图中时遇到问题。 我有没有任何错误的代码，当我在 iPad 模拟器上运行它时，它工作得非常完美。 但是，当我尝试在物理 iPad 设备上运行它时，问题就出现了。 当我运行它并达到需要显示 PDF 的程度时，webview 会加载，但 webview 中没有显示 PDF。

PDF 实际上是由应用程序生成的，我将它存储在 library 文件夹内的一个目录中。

在 WebView 中显示 PDF 的代码：

public void LoadPdfToWebView(string pdfPath)
    {
        //Console.WriteLine("Load request started");

        WebView.LoadRequest(new NSUrlRequest(new NSUrl(pdfPath, false)));
        View.AddSubview(WebView);

        //Console.WriteLine("Load request Finished");
    }

不太确定为什么会这样，希望有人可以提供帮助。

Answer 1

在 Xamarin.IOS 中，在 UIWebView 中显示 HTML 以外的文档类型：

1. 将文档（例如，PDF）添加到 Xamarin.iOS 项目。 将构建操作设置为 BundleResource。 您可以通过右键单击该文件并在打开的菜单中选择构建操作来设置文件的构建操作。

2. 创建一个 UIWebView 并将其添加到视图中：

    webView = new UIWebView (View.Bounds); View.AddSubview(webView);

3. 使用 NSUrl 和 NSUrlRequest 类加载文件：

    string fileName = "Loading a Web Page.pdf"; // remember case-sensitive string localDocUrl = Path.Combine (NSBundle.MainBundle.BundlePath, fileName); webView.LoadRequest(new NSUrlRequest(new NSUrl(localDocUrl, false))); webView.ScalesPageToFit = true;

可以参考这个官方步骤，如果有问题或者其他需求，可以参考这个链接

如果无法读取 bundle 中的资源，可以将资源缓存放在沙箱的 temp 目录中，尝试使用LoadRequest读取。

Answer 2

我刚刚为一个应用程序修复了这个问题，并认为我会发布解决方案

这是针对 WKWebView 的，这是 Apple 自 2020 年 12 月起的一项要求，尽管截止日期已暂时延长

Xaml PdfWebView 内容页

<controls:PdfWebView
  Source="{Binding PDFSource}"
  HeightRequest="1000"
  WidthRequest="1000"/>

控制

namespace XForms.Controls
{
    public class PdfWebView : WebView { }
}

VM，只有相关部分

private string _pdfSource;
public string PDFSource
{
      get => _pdfSource;
      set
      {
           if (Device.RuntimePlatform == Device.Android && value.StartsWith("file:") == false)
           {
                value = $"file:///android_asset/pdfjs/web/viewer.html?file=file:///{WebUtility.UrlEncode(value)}";
           }
           SetProperty(ref _pdfSource, value);
      }
}

适用于 PdfWebView 的 iOS 渲染器

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XForms.Controls;
using WebKit;
using Foundation;

[assembly: ExportRenderer(typeof(PdfWebView), typeof(iOSUI.Renderers.PdfWebViewRenderer))]
namespace iOSUI.Renderers
{
    public class PdfWebViewRenderer : ViewRenderer<WebView, WKWebView>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var wkWebViewConfiguration = new WKWebViewConfiguration();

                var wkWebView = new WKWebView(Frame, wkWebViewConfiguration)
                {
                    AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
                };
                SetNativeControl(wkWebView);
            }
            if (e.NewElement != null)
            {
                if (string.IsNullOrEmpty(((UrlWebViewSource)e.NewElement.Source)?.Url) == false)
                {
                    var url = ((UrlWebViewSource)e.NewElement.Source).Url;
                    if(url.StartsWith("http"))
                    {
                        Control.LoadRequest(new NSUrlRequest(new NSUrl(url)));
                    }
                    else
                    {
                        Control.LoadFileUrl(new NSUrl($"file://{url}"), new NSUrl($"file://{url}"));
                    }
                }
            }
        }
    }
}

安卓渲染器

using System.Net;
using Android.Content;
using Android.Views;
using Android.Webkit;
using XForms.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(PdfWebView), typeof(AndroidUI.Renderers.PDFViewRenderer))]
namespace AndroidUI.Renderers
{
    public class PDFViewRenderer : WebViewRenderer
    {
        public PDFViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.Settings.JavaScriptEnabled = true;
                Control.Settings.DomStorageEnabled = true;
                Control.Settings.AllowFileAccess = true;
                Control.Settings.AllowFileAccessFromFileURLs = true;
                Control.Settings.AllowUniversalAccessFromFileURLs = true;

                Control.SetWebChromeClient(new WebChromeClient());
            }
        }

        // If you want to enable scrolling in WebView uncomment the following lines.
        public override bool DispatchTouchEvent(MotionEvent e)
        {
            Parent.RequestDisallowInterceptTouchEvent(true);
            return base.DispatchTouchEvent(e);
        }
    }
}

该解决方案使用pdfjs在Android和WKWebview iOS中呈现PDF

PDFSource 是文件的完整路径，我使用 System.IO .net 标准调用以跨平台方式处理此问题

所有的文件都存储在（我有一个方法叫做GetFullPath返回跨平台通用路径）

Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)

结合文件名与 Path.Combine

Path.Combine(GetFullPath(), fileName);

这是在 VM 中设置的 PDFSource

Pdfjs 库文件只是复制到 Assets/pdfjs for Android

iOS 的神奇之处在于调用 LoadFileUrl 而不是 LoadRequest 并在前面加上“file://”

我稍微清理了我们的命名空间，所以它们中的一些不会像 XForms.Controls 等那样解析我们的内部代码