How can I display a PDF file in .NET MAUI - using the PDF.js library - for iOS and Windows?

Auto 46 Reputation points
2023-12-13T15:32:35.8533333+00:00

I plan to display a PDF file on my MAUI app. I tried following the answer at this link (https://learn.microsoft.com/en-us/answers/questions/1310387/how-to-view-the-pdf-file-from-maui) and it worked for Android.

The PDF is in the Resources\Raw.
I want to display it also in iOS and Windows.

How can we pass the PDF file for these OSs?

I tried, but it doesn't work. Here my attempt.

using System;
using Microsoft.Maui;
using Microsoft.Maui.Controls;

public partial class PdfPage : ContentPage
{
	public PdfPage()
	{
		InitializeComponent();
        LoadPdfViewer();
    }

	private void LoadPdfViewer()
	{
#if ANDROID         
pdfFilePath = $"file:///android_asset/pdfjs/web/viewer.html?file=file:///android_asset/simple.pdf"; 
#elif WINDOWS         
pdfFilePath = $"pdfjs/web/viewer.html?file=ms-appx-web:///simple.pdf"; 
#elif IOS         
pdfFilePath = $"pdfjs/web/viewer.html?file=file:///simple.pdf"; 
#endif
		PdfWebView.Source = new UrlWebViewSource { Url = pdfFilePath };
	}
}

In the post linked above there is also specified the following:

Next, add following handler to enable javascript and access files for webview like following code.

      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
#elif WINDOWS
#endif
            });

How can we apply this code also for iOS and Windows?

Thanks.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,897 questions
0 comments

4 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Auto 46 Reputation points
    2023-12-20T08:28:12.8066667+00:00

    The solution for iOS is to add the following code in WebViewHandler, in order to allow the WKWebView to have file access from file URLs.

    #elif IOS || MACCATALYST
	if (handler.PlatformView is WebKit.WKWebView wkWebView) 
    {
              wkWebView.Configuration.Preferences.SetValueForKey(Foundation.NSObject.FromObject(true), (Foundation.NSString)"allowFileAccessFromFileURLs");
	}
#endif
    1 person found this answer helpful.
  2. Bruce (SqlWork.com) 56,686 Reputation points
    2023-12-13T18:56:49.3033333+00:00

    for IOS (which alway has pdf support) and windows, you just set the webview url to the pdf file, you don't use the pdf app.

  3. Auto 46 Reputation points
    2023-12-14T09:14:32.64+00:00

    I solved the problem with Windows.

    #elif WINDOWS
        pdfFilePath = $"pdfjs/web/viewer.html?file=/simple.pdf";
#endif

    but not for iOS.

  4. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,446 Reputation points Microsoft Vendor
    2023-12-18T07:53:44.5033333+00:00

    Hello,

    The PDF is in the Resources\Raw. I want to display it also in iOS and Windows.but not how to pass the pdf file to the page. I tried the following, but it doesn't work.I'm close, but I'm still missing something.

    For iOS, you could try the following code:

    #if IOS
        var pdf = NSBundle.MainBundle.PathForResource("simple", "pdf");// you found the pdf path
        PdfWebView.Source = new UrlWebViewSource { Url = pdf };// using it directly
#endif

    Best Regards,

    Wenyan Zhang

    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.