How to view the PDF file in webview MAUI android

Question

How to view the PDF file in webview MAUI android

Amose Kumar R 5

I have a pdf file that is storage in android local storage, how to display this pdf file in MAUI android through webview.

I am using pdf js and i have provided webview source as
$"file:///android_asset/pdfjs/web/viewer.html?file={my pdf path}".

It is throwing file not found error in webview android.

1 answer

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

There are four reasons for this problem.

The pdfjs version used is incorrect.
The MAUI file URL is not converted to an Android-specific URI.
Javascript is not enabled for webview.
The file path of pdfjs is incorrect.

You could follow the steps below to display your local files in MAUI.

Step 1. Enable JavaScript for webview, which you can do in the page's constructor.

public MainPage()
        {
            InitializeComponent();
            Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
#if ANDROID
                handler.PlatformView.Settings.JavaScriptEnabled = true;
                handler.PlatformView.Settings.AllowFileAccess = true;
                handler.PlatformView.Settings.AllowFileAccessFromFileURLs = true;
                handler.PlatformView.Settings.AllowUniversalAccessFromFileURLs = true;

#endif
            });
        }

Step 2. Download the PDF.js file for version 2.14.305. After testing, the latest version of PDF.js will have an error that the PDF file cannot be displayed.

Step 3. Check that your pdfjs path is correct. For example, if you move the build and web folder directly to the Raw folder, pdfjs is not needed in the path. file:///android_asset/web/viewer.html?

Step 4. Change the URL to the URI of the Android platform.

#if ANDROID
            Android.Net.Uri uri = Android.Net.Uri.FromFile(new Java.IO.File(path));
            string pdfpath = string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", uri);
            pdfviewer.Source = new UrlWebViewSource { Url = pdfpath };
#endif

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Amose Kumar R 5 Reputation points

2024-02-02T05:45:52.43+00:00

Hi
I have installed correct version of pdfjs
i have enabled the javascript for the webview I have correct pdfjs path i changed url for the android platfom
but still i am getting fill not found error

this is the pdf file path that locally stored - /data/user/0/com.app.application/files/PC/Temp/2024-02-02T111124/PlanEXPORT.20240202_111124/20240201_1435.20240202_111124.pdf
is there anything i am missing or anything i have done wrong?

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

I noticed that you put the file in the Raw folder, is its Build Action MauiAssert? If yes, you can refer to How to Open Local PDF file in WebView in .NET MAUI to use the file:///android_asset/web/viewer.html?file=file:///android_asset/filename.pdf directly.

The way in this answer is to show files that are not preset in MAUI, e.g. after downloading.

string path;
private async Task downloadfile()
{
    string remoteUri = "pdf link";
    string fileName = "test.pdf";
  
    HttpClient myWebClient = new HttpClient();
   
    // Download the Web resource and save it into the current filesystem folder.
    var stream = await myWebClient.GetStreamAsync(remoteUri);
    path = System.IO.Path.Combine(FileSystem.AppDataDirectory, fileName);
    if(!File.Exists(path))
    {
        using Stream stream1 = File.Open(path, FileMode.Create);
        await stream.CopyToAsync(stream1);
       
    }
}

private async void Button_Clicked(object sender, EventArgs e)
{
    await downloadfile();
#if ANDROID
    Android.Net.Uri uri = Android.Net.Uri.FromFile(new Java.IO.File(path));
    string pdfpath = string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", uri);
    pdfviewer.Source = new UrlWebViewSource { Url = pdfpath };
#endif
}

Amose Kumar R 5 Reputation points

2024-02-02T07:11:48.4366667+00:00

Hi
Pdf files are stored in locally, not in MAUI. we are having pdf file in this path /data/user/0/com.app.application/files/PC/Temp/2024-02-02T111124/PlanEXPORT.20240202_111124/20240201_1435.20240202_111124.pdf

how to display this pdf file for android.
i have tried the below
I have put web and build in pdfjs folder and i make path like this "file:///android_asset/pdfjs/web/viewer.html?file={0}", uri - not working

Then i have put web and build in Raw folder and i make path like this
"file:///android_asset/web/viewer.html?file={0}", uri - not working
Amose Kumar R 5 Reputation points

2024-02-02T07:19:17.2633333+00:00

Hi
We are having the pdf files that are stored locally for android, not in MAUI.
we are storing the pdf files below path
/data/user/0/com.app.application/files/PC/Temp/2024-02-02T111124/PlanEXPORT.20240202_111124/20240201_1435.20240202_111124.pdf

How to display this file for android webview I have tried below steps
I have put the pdfjs folder in resources folder, the I have put web and build folder in pdfjs folder and i make the path like this "file:///android_asset/pdfjs/web/viewer.html?file={0}", uri - not working

Then I have put the Raw folder in resources folder, the I have put web and build folder in Raw folder and i make the path like this "file:///android_asset/web/viewer.html?file={0}", uri - not working
Amose Kumar R 5 Reputation points

2024-02-02T07:34:50.4733333+00:00

Also i have tried below I copied sample pdf file in raw folder the i set path file:///android_asset/web/viewer.html?file=file:///android_asset/filename.pdf - not working
Amose Kumar R 5 Reputation points

2024-02-02T07:40:09.33+00:00

This is my project structure

Inside the raw folder i have put wed and build folder

is there anything i am missing or anything i have done wrong?
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-02-02T07:54:36.6566667+00:00
There are several reasons for this error.

The path is too long. As a general rule, a URL link cannot exceed 260 characters.

The file name is wrong or invalid. Please remove the "." character from pdf file.

Also i have tried below I copied sample pdf file in raw folder the i set path

Moving the pdf file to the Raw folder and changing the Build Action to MauiAssert definitely works. If you have this issue, you have some wrong steps in the configuration process.

If the problem persists after the above causes are ruled out, we recommend that you create a support ticket to obtain one-on-one technical support for specific troubleshooting.
Amose Kumar R 5 Reputation points

2024-02-02T08:34:55.5933333+00:00

The same implementation was working in xamarin forms project. In Maui alone we are facing this issue. i will check above points which you mentioned
Amose Kumar R 5 Reputation points

2024-02-02T08:45:32.3466667+00:00

The same implementation was working in Xamarin forms project, in MAUI alone i am facing issue. I will check the above points which you mentioned
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-02-05T06:48:01.9866667+00:00

Thanks for your feedback.
IndBal 20 Reputation points

2024-02-15T03:53:10.58+00:00

@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) Greetings for the day.. I have tried all the steps that you have mentioned and pdf is also loaded successfully inside webview in MAUI android application, but it is not showing any content inside PDF, only the page numbers on top is visible and able to see the zoom-in & out properties all, even doc properties is visible. Only the content is empty inside any pdf- tried loading both local file and also other files from android mobile. Please help with this. Thanks in advance.
IndBal 20 Reputation points

2024-02-15T04:47:42.13+00:00

I have raised a new ticket for the above mentioned issue- https://learn.microsoft.com/en-us/answers/questions/1532989/no-content-inside-pdf-which-is-loaded-in-customweb Please help, thanks.

Share via

How to view the PDF file in webview MAUI android

1 answer

Your answer