How can I display a PDF file in MAUI?

Question

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 I have used the namespace:

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolkit]"

but it's showing that it can't find 'toolkit:Popup'.
Following is my XAML code.

Target platform - Andorid

Thank you!

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		   	 xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
			 x:Class="ReadFile.Views.LicensePage"
			 Title="LicensePage">
	<Grid>
		<Grid.RowDefinitions>
		     <RowDefinition Height="40"/> 
		     <RowDefinition Height="*"/> 
		</Grid.RowDefinitions>

    	<Grid Grid.Row="0" BackgroundColor="LightGray">
	         <ImageButton Source="left_arrow.png"
                      	  Command="{Binding GoBackCommand}"                      
						  HeightRequest="35"
                          HorizontalOptions="Start"  
                          Margin="-90,0,0,0"/> 
        <Label Text="Guide"
               FontSize="28" 
               HorizontalOptions="Center"/> 
    	</Grid> 

        <ScrollView Grid.Row="1">
     		<VerticalStackLayout>  
	            <WebView Source="UserGuide.pdf"/>   
	        </VerticalStackLayout> 
   		 </ScrollView>
	 </Grid>
</toolkit:Popup>

This example seems to display the PDF in a popup page. I want to display it on a ContentPage. How can I do that?

Answer 1

Hello,

Your pdfFilePath cannot be accessed. Here are my steps to make webview to show the pdf.

Firstly, I create a pdfjs folder in the Resources/Raw/, then copy build and web content from pdfjs to the Resources/Raw/pdfjs, and I copy the UserGuide.pdf file to the Resources/Raw/, please make sure your build action of UserGuide.pdf is MauiAsset.

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

Here is my string pdfFilePath = $"file:///android_asset/pdfjs/web/viewer.html?file=file:///android_asset/UserGuide.pdf"; ;.

Best Regards,

Leon Lu

---

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.

Answer 2

It's already been a year since the question, but you can try this component https://github.com/vitalii-vov/Maui.PDFView

I created it when I was faced with a similar problem.

<ContentPage
    x:Class="Example.Business.UI.Pages.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pdf="clr-namespace:Maui.PDFView;assembly=Maui.PDFView">

    <pdf:PdfView Uri="{Binding PdfSource}" />

</ContentPage>

internal partial class MainPageViewModel : ObservableObject
{
    [ObservableProperty] private string _pdfSource;

    [RelayCommand] private void ChangeUri()
    {
        PdfSource = "/path/to/file.pdf";
    }
}