No content inside PDF which is loaded in Customwebview in MAUI application on Android

[MikeP0911]

Description

I am trying to load and view PDF files from local and from android device(mail) inside customwebview in MAUI application using PDF.js library. Done with all handlers code for customwebview implementation and given all permissions needed for android device in manifest file. PDF is loaded inside webview, but no content is displayed. Only the page numbers on top is visible and able to see the zoom-in & out properties all, even doc properties is visible. But the content is empty inside any pdf with grey screen as in below image. No error in logs also.

Steps to Reproduce

1.Create CustomWebview using handlers in MAUI application. 2.Try opening any pdf file in viewer using pdf.js library. 3.PDF content is empty but it is loaded inside webview without any issues.

Expected Result: PDF file can be viewed with all contents in it.

Actual Result: PDF file is empty without any content, but page number is loaded on top.

Link to public reproduction project repository

No response

Version with bug

7.0.101

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

7.0.101

Affected platforms

Android

Affected platform versions

Android 11 and up

Did you find any workaround?

No

Relevant log output

No error logs

[ghost]

Hi @MikeP0911. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[drasticactions]

We would need to see how you're implementing this view, my guess right now would be a specific configuration issue within your application that's not loading the references, rather than something intrinsic to the MAUI WebView implementation.

[MikeP0911]

We would need to see how you're implementing this view, my guess right now would be a specific configuration issue within your application that's not loading the references, rather than something intrinsic to the MAUI WebView implementation.

Sure will give some more details on how I have implemented it. Please check the below screenshots for reference:

pdf.js library files are added as in below image, in Resources->Raw folder and set it as MAUIAsset in BuildAction.

Also the following code is implemented in CustomWebViewHandler class in MAUI application for CreatePlatformView() method:

protected override AndroidWebview CreatePlatformView()
{
    var webView = new Android.Webkit.WebView(Context);
    try
    {
        LogManager.GetLogger(Constant.ZipLog).Info(AppResources.processStart);          

        if (webView != null)
        {
            var virview = VirtualView as CustomWebView;

            string fileName = virview.Uri;

            LogManager.GetLogger(Constant.ZipLog).Info("fileName :" + fileName);
            webView.Settings.AllowFileAccess = true;
            webView.Settings.AllowFileAccessFromFileURLs = true;
            webView.Settings.AllowUniversalAccessFromFileURLs = true;

            //Newly added
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.DomStorageEnabled = true;
            webView.Settings.LoadWithOverviewMode = true;
            webView.Settings.UseWideViewPort = true;
            webView.Settings.BuiltInZoomControls = true;
            webView.Settings.DisplayZoomControls = false;
            webView.Settings.SetSupportZoom(true);
            webView.Settings.AllowContentAccess = true;
            //webView.Settings.SetAppCacheEnabled(true);
            //webView.Settings.DefaultTextEncodingName = "UTF-8";
            webView.SetWebViewClient(new Android.Webkit.WebViewClient());                

            if (File.Exists(virview.Uri))
                LogManager.GetLogger(Constant.ZipLog).Info("File Exist");

            string url = string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", "file://" + fileName);

            // For local pdf file
            // string url = string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", "file:///android_asset/Content/BookPreview.pdf");

            LogManager.GetLogger(Constant.ZipLog).Info("url :" + url);

            if (!fileName.EndsWith(".txt"))
                webView.LoadUrl(url);
        }
    }
    catch (System.Exception ex)
    {
        LogManager.GetLogger(Constant.ZipLog).Info("Exception :" + ex.Message);
    }
    return webView;
}

• where "CustomWebView" class is a control class having filepath URL as BindableProperty.
• Viewer.xaml class is having this control class implemented inside for webview as like below:

  <ContentPage.Content>
      <local:CustomWebView x:Name="custwebview"                       
                           IsVisible="true"
                           IsEnabled="True"/>
  </ContentPage.Content>

and its xaml.cs file is having below code:

 public Viewer(string filePath)
 {
         FilePath = filePath;
         InitializeComponent();
         custwebview.Uri = filePath;          
         custwebview.HorizontalOptions = LayoutOptions.FillAndExpand;
         custwebview.VerticalOptions = LayoutOptions.FillAndExpand;
}

[MikeP0911]

Also attaching here the diagnostic log output file for reference Output-Debug.txt

Below image is the output of loaded PDF with empty content in android device:

[ghost]

Hi @MikeP0911. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[PureWeen]

@jfversluis

[jfversluis]

As indicated, a reproduction would be really helpful so we don't need to copy and paste the bits from here and hope you didn't forget anything. Also maybe the PDF itself might be helpful?

I have a sample repo that does this here: https://github.com/jfversluis/MauiPdfJsViewerSample I think this also somewhat simplifies your code. Maybe that can be helpful to diagnose things on your side?

Another thing you might try is fire up Edge or Chrome and go to edge://inspect or chrome://inspect depending on the browser you're using. Make sure your Android app is running and it should pop up in that overview and you will be able to see the developer console there. Maybe there is some useful output in the JavaScript console there.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[MikeP0911]

As indicated, a reproduction would be really helpful so we don't need to copy and paste the bits from here and hope you didn't forget anything. Also maybe the PDF itself might be helpful?

I have a sample repo that does this here: https://github.com/jfversluis/MauiPdfJsViewerSample I think this also somewhat simplifies your code. Maybe that can be helpful to diagnose things on your side?

Another thing you might try is fire up Edge or Chrome and go to edge://inspect or chrome://inspect depending on the browser you're using. Make sure your Android app is running and it should pop up in that overview and you will be able to see the developer console there. Maybe there is some useful output in the JavaScript console there.

@jfversluis Thanks much for the reply and sorry for my late response.

I have prepared a reproducible project with my local project to share with you, but there were some issues in cloning with Git repository, so unable to share it. Meanwhile I was trying with the sample app you have shared and it was working in my system, so I have again changed my code as per your project and tried, its working fine now with webview in xaml and AppendToMapping method in xaml.cs file and I think the reason for the issue maybe due to the separate control class and separate CustomWebHandler (which inherits ViewHandler<CustomWebView, Android.Webkit.WebView>) class and its methods like- PropertyMapper() and its mapping functions which I have left as blank. Still trying to include the AppendToMapping method in Custom handler class as per our project requirement, it's not working but showing the empty content again. So will check with this. Thanks for your time and help, much appreciated.

If possible, please let me know why CustomWebView is not working whereas simple Webview is working in this situation. Thanks again.

[jfversluis]

If possible, please let me know why CustomWebView is not working whereas simple Webview is working in this situation. Thanks again.

That is a bit hard to tell without really digging into it. I think we've established that this can work, it works with my sample and something is not going right in how you're doing it.

While I scrolled over your screenshots one thing is kind of interesting. It says page 1 of 11, is that actually correct? The PDF is 11 pages? So it does load, but it doesn't show it correctly?

I think we have concluded that there is not a bug with this in .NET MAUI it seems, as such I'm closing this one for now. If you still need help, consider getting that reproduction sample online somewhere and post it to Microsoft Q&A, Stack Overflow, or another technical forum where questions are allowed.

Thanks!

[MikeP0911]

If possible, please let me know why CustomWebView is not working whereas simple Webview is working in this situation. Thanks again.

That is a bit hard to tell without really digging into it. I think we've established that this can work, it works with my sample and something is not going right in how you're doing it.

While I scrolled over your screenshots one thing is kind of interesting. It says page 1 of 11, is that actually correct? The PDF is 11 pages? So it does load, but it doesn't show it correctly?

I think we have concluded that there is not a bug with this in .NET MAUI it seems, as such I'm closing this one for now. If you still need help, consider getting that reproduction sample online somewhere and post it to Microsoft Q&A, Stack Overflow, or another technical forum where questions are allowed.

Thanks!

Yes, its working with normal Webview instead of Customweb view, Thanks.