How to Open Local PDF file in WebView in .NET MAUI

Question

Hi
I have created sample .NET MAUI app for display local pdf file. I have kept my kayprotect_training.pdf file in the Resources/Raw/folder and set build action of kayprotect_training.pdf is MauiAsset. after that I create a pdfjs folder in the Resources/Raw/, then copy build and web content from pdfjs to the Resources/Raw/pdfjs,

<ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <WebView x:Name="PdfWebView"/>
        </VerticalStackLayout>
    </ScrollView>

private void LoadPdfViewer()
    {
        string pdfFilePath = "file:///android_asset/pdfjs/web/viewer.html?file=file:///android_asset/pdfjs/web/kayprotect_training.pdf";
        PdfWebView.Source = new UrlWebViewSource { Url = pdfFilePath };
    }

but still unable to see the pdf file

instead of that I can see below error

even I tried to open below url in webview but still unable to see it.
https://www.africau.edu/images/default/sample.pdf

Answer 1

Hello,

Your WebView is getting a file not found error because you can't use the Android file path format directly in MAUI.

There is already a full discussion and sample of how to present a PDF in MAUI in GitHub, please refer to The Webview does not display PDF #7399.

Update:

After testing your project with pdf.js to investigate. Please follow the steps below to display your local PDF file using pdf.js.

Step 1. 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 2. Create a pdfjs folder in the Raw folder in your MAUI project and copy the web and build folders to the pdfjs folder.

Step 3. Set your pdf file properties to MauiAssert.

Step 4. Refer to the following code to display a pdf file using a WebView.

<WebView x:Name="web_view" HeightRequest="500" WidthRequest="500"/>

        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;

#elif IOS
#endif
            });
            LoadPdfViewer();
        }

        private void LoadPdfViewer()
        {
            string pdfFilePath = $"file:///android_asset/pdfjs/web/viewer.html?file=file:///android_asset/test.pdf";
            web_view.Source = new UrlWebViewSource { Url = pdfFilePath };
        }

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.