Xamarin.forms 在 web 视图中显示 PDF 不起作用答案

【问题标题】：Xamarin.forms display PDF in webview not workingXamarin.forms 在 web 视图中显示 PDF 不起作用
【发布时间】：2018-05-29 18:00:34
【问题描述】：

我从我的服务器下载了一个 pdf 流。在我的应用程序中，我将字节数组以 pdf 格式保存到本地文件夹中。但是当我在 webview 中打开它时，它只显示一个白页。

我遵循了这个例子：https://developer.xamarin.com/recipes/cross-platform/xamarin-forms/controls/display-pdf。

这是我的 xaml 中的 customwebview：

<local:CustomWebView x:Name="customView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

这是我的自定义视图代码：

 public class CustomWebView : WebView
    {        
        public static readonly BindableProperty UriProperty = BindableProperty.Create(propertyName: "Uri",
       returnType: typeof(string),
       declaringType: typeof(CustomWebView),
       defaultValue: default(string));

        public string Uri
            {
                get { return (string)GetValue(UriProperty); }
                set { SetValue(UriProperty, value); }
            }
    }

这是我检索 pdf 字节数组并将其存储在本地的方法：

 private async void ReadPDF()
        {
            var response = CommonLibrary.Helpers.HTTPClientHelper.DownloadPDF(AccountBL.AccessToken, APISettings.APIURI("api/booking/pdf"));
            var streamContent = response.Content as System.Net.Http.StreamContent;
            var bytes = CommonLibrary.Helpers.FileHelper.ReadBytes(await streamContent.ReadAsStreamAsync());
            var dir = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
            var fileName = "test.pdf";
            CommonLibrary.Helpers.FileHelper.WriteFileFromByteArray(bytes, dir, fileName);

           customView.Uri = System.IO.Path.Combine(dir, fileName);            
        }

我错过了什么吗？

【问题讨论】：

您是否尝试过让您的 webview 访问网站，只是为了确保是加载问题还是显示问题？
嗨，Jaxi，你是对的。一个正常的网站也没有加载。您只需设置 customWebview.Uri 我是否正确？
嗨 Jaxi，当我设置源属性时加载了一个普通站点 -> customView.Source = "google.nl"。当我将源设置为 pdf 位置时，它不起作用。
你能断点看看dir变量是否真的填充了目录吗？
我做了，它已被填充，我可以通过设备监视器找到该文件。

标签： c# xamarin.forms

【解决方案1】：

如果我没记错的话，您可以在 iOS 的 web 视图中显示“远程”PDF。 Android有一些问题。我建议看看这个 repo OpenPDF。我使用 CustomRenderer 和谷歌工具来显示 PDF。我在使用某些 Android 版本时遇到了一些问题......但你可以看看。（这里是blog）

否则有@AdamPedley 建议使用PDF JS Viewer Adam Pedley 代码是here。

这是适用于 Android 的 CustomRenderer

[assembly: ExportRenderer (typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace DisplayPDF.Droid
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged (e);

            if (e.NewElement != null) {
                var customWebView = Element as CustomWebView;
                Control.Settings.AllowUniversalAccessFromFileURLs = true;
                Control.LoadUrl (string.Format ("file:///android_asset/pdfjs/web/viewer.html?file={0}", string.Format ("file:///android_asset/Content/{0}", WebUtility.UrlEncode (customWebView.Uri))));
            }
        }
    }
}

【讨论】：

感谢您的回答，openpdf 是可行的方法，但我遇到了一些问题。它只适用于便携式项目吗？我的解决方案中有一个共享项目。
我认为它可以在共享项目中正常工作。它只是一个 WebView 的自定义渲染器
嗨亚历山德罗，我想我不明白这是如何工作的。我试图在共享项目中创建渲染器，但没有成功。我应该把这个渲染器放在哪里？这仅适用于Android吗？我也希望它适用于IOS？我不明白渲染器的概念。你能试着一步一步地帮助我吗？提前致谢。圣诞快乐。
@Yaza，帖子中有一个回购。是的，它仅适用于 Android，因为 iOS 使用 webview 应该可以正常工作。你也可以看看这个解决方案blog.verslu.is/xamarin/xamarin-forms-xamarin/…
嗨亚历山德罗，谢谢你的完美工作。感谢你的付出。抱歉耽搁了。

【解决方案2】：

以下方法将允许您以 xamarin 形式查看 pdf。如果您尝试从 azure blob 打开一个或者您有有效的 URl。

WebView webView = new WebView();
var page = new ContentPage();
webView.Source = "https://docs.google.com/viewer?url=http://yourpdfurl.pdf";
page.Content = webView;
Navigation.PushModalAsync(page);

【讨论】：

这对 Android 和 iOS 是否也适用于本地路径？
如果您的 PDF 有有效的 URL 并且您需要将“url=yourpdfurl.pdf”替换为 PDF url，则此方法有效。我使用 azure blob 存储来存储 PDF。