How to use <WebView /> to display a PDF in .NET MAUI Blazor Hybrid

I need to show a PDF stored in the app's local storage in a WebView component. The PDF should be opened within the app.

PDF's path is similar to this. But the PDF name can be changed.

/data/user/0/com.companyname.mycomapny/files/WorkOrders/OrderOne/OrderOne.pdf

I have tried using <iframe/> and <embed/> but could not show the PDF.

I'm getting a blank screen. What am I doing wrong? Is there any other way to show the PDFs that are stored in the local storage?

Below is my code.

MauiProgram.cs

public static MauiApp CreateMauiApp()
{
    MauiAppBuilder builder = MauiApp.CreateBuilder();
    builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .UseBarcodeReader()
            .ConfigureMauiHandlers(handlers =>
            {
                handlers.AddHandler<WebView, Microsoft.Maui.Handlers.WebViewHandler>();
            })
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });
    return builder.Build();
}

PdfViewer.razor

<WebView Source="@PdfPath" Width="100%" Height="100%"/>

@code {
    [Parameter]
    public FileContent fileContent { get; set; }

    public string PdfPath = string.Empty;

    protected override void OnInitialized()
    {
        if (File.Exists(fileContent.FilePath) && fileContent.Type == "application/pdf")
        {
            // fileContent.FilePath is /data/user/0/com.companyname.mycomapny/files/WorkOrders/OrderOne/OrderOne.pdf
            PdfPath = $"file://{fileContent.FilePath}";
            
            StateHasChanged();
        }
    }
}

First of all, WebView is not a web control so you can't use it in the razor page inside the BlazorWebView. And then the android webview doesn't support display local pdf, it supports Google PDF Viewer to display pdf online.

So you may need to use some other plugins to do that. Such as: Blazor PDF Viewer.

1. Set up it step by step according to the official document:Getting started - MAUI Blazor Hybrid App (.NET 8).
2. And then using the following code to display the PDF:

<p>@eventLog</p>

<PdfViewer Class="mb-3"
Url="@string.Format("data:application/pdf;base64,{0}", pdfBase64String)"
OnDocumentLoaded="OnDocumentLoaded"
OnPageChanged="OnPageChanged" />
@code {
    private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";
    private string pdfBase64String;

    protected override void OnInitialized()
    {
        Byte[] bytes = File.ReadAllBytes("/data/user/0/com.companyname.mycomapny/files/WorkOrders/OrderOne/OrderOne.pdf");
        // get pdf as base64 string
        pdfBase64String = Convert.ToBase64String(bytes);
    }

    private void OnDocumentLoaded(PdfViewerEventArgs args)
        => eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";

    private void OnPageChanged(PdfViewerEventArgs args)
        => eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
}