Display local PDF file in webview control show white screen

Question

I loading and save to device pdf file from internet.

Next I save file path and create WebView with source queals this path, but I see white screen.

I have custom renderer for iOS WebView

public class ZoomableWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            var view = NativeView as UIWebView;
            if (view == null) return;
            view.ScrollView.ScrollEnabled = true;
            view.ScalesPageToFit = true;
        }
    }

This renderer can open images (png,jpg,tiff), but can't open pdf file. I check file path and it is correct. When i try zoom this screen i get this result

I already try this https://stackoverflow.com/questions/24130547/uiwebview-showing-blank-screen-in-ios-8, but is not working. — Artem Tishchenko, Oct 31 '17 at 15:50

score 0 · Accepted Answer · answered Nov 01 '17 at 07:03

According to Display a Local PDF File in a WebView, you can create custom webview with the BindableProperty to set the url for the UIWebView, and use the ViewRenderer<CustomWebView, UIWebView> to render your custom webview.

Create custom webview class with BindableProperty:

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); }
    }
}

Create renderer like this:

public class CustomWebViewRenderer : ViewRenderer<CustomWebView, UIWebView>
{
    protected override void OnElementChanged (ElementChangedEventArgs<CustomWebView> e)
    {
        base.OnElementChanged (e);

        if (Control == null) {
            SetNativeControl (new UIWebView ());
        }
        if (e.OldElement != null) {
            // Cleanup
        }
        if (e.NewElement != null) {
            var customWebView = Element as CustomWebView;
            string fileName = Path.Combine (NSBundle.MainBundle.BundlePath, string.Format ("Content/{0}", WebUtility.UrlEncode (customWebView.Uri)));
            Control.LoadRequest (new NSUrlRequest (new NSUrl (fileName, false)));
            Control.ScalesPageToFit = true;
        }
    }
}

Notice that the official documentation assumes the pdf file is stored in the Content folder of the project. So, if it is directly in the Resource folder, remove the prefix "Content/" in the path.

Consume it in the XAML like this:

<ContentPage.Content>
    <local:CustomWebView Uri="BookPreview2-Ch18-Rel0417.pdf" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</ContentPage.Content>

Display local PDF file in webview control show white screen

1 Answers1