We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfPdfViewerServer coming up with blank Screen


I have an sfPdfViewerServer component inside of a dialog like this:

       <SfDialog @ref="@dialog" IsModal="true" Width="1000px" Height="800px" Visible="false">
            <SfPdfViewerServer @ref="viewer" Width="100%" Height="100%" DocumentPath="@documentPath"></SfPdfViewerServer>

 Then in the @code I create a pdf and try to load it but the dialog comes up totally blank. The base64 string is correct since I have saved it, decoded it and was able to load the pdf file externally.

                await dialog.ShowAsync();
                var pdfStream = ExportService.CreatePdf(_printHtml);
                var bytes = pdfStream.ToArray();
                var base64String = Convert.ToBase64String(bytes);
                documentPath = "data:application/pdf;base64," + base64String;

I have set up AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; } in Program.cs to allow for larger files.

Any suggestions?


4 Replies 1 reply marked as answer

SH Sheldon January 24, 2023 05:49 PM UTC

I managed to be able to see the viewer by using its Created event after the dialog becomes visible. The problem now it that it is empty - just a grey screen with a toolbar.

I put in the DocumentFailed and DocumentLoaded events and neither one of them is called.

I also tried used loadAsync and no error is thrown. I'm not sure where else to look to find the issue.



SH Sheldon January 25, 2023 12:37 PM UTC

I have also now noticed that I can pass anything to LoadAsync and nothing happens - for example LoadAsync("") doesn't throw an error. 

I can't even think how to diagnose what is happening since it runs perfectly fine with valid or invalid input and just shows the empty pdfviewerserver.

Any hints are appreciated :)


SH Sheldon January 25, 2023 01:35 PM UTC

I figured it out. Even though I am on .NET 6, it was picking up the javascripts from _host.cshtml ( possibly because I upgraded to .NET 6 I am not sure yet ). Anyway, putting the printviewerserver.js script in my _host.cshtml fixed the problem. 

It would have been nice to have some sort of error occur though - would have saved a lot of time.


Marked as answer

VV Visvesvar Venkatesan Syncfusion Team January 25, 2023 04:18 PM UTC

We found that you are trying to load the PDF Viewer component inside a dialog and load the document as a byte array.

We have provided the code snippet and sample to load inside a dialog component and load as a byte array. We have also attached the image for reference

Code Snippet:

<div id="target" style="width:800px;height:100%">


    <SfButton @onclick="OnClick">Open PDF Viewer</SfButton>


    <SfDialog @ref="@dialog" Target="#target" MinHeight="100%" Width="1060px" CloseOnEscape="true" AllowDragging="true" Visible="false"

              IsModal="true" Header="@Header" ShowCloseIcon="false">


        <SfButton @onclick="OnClickopen">Open PDF Document</SfButton>

        <SfButton @onclick="Load">Load as byte array</SfButton>


        <SfPdfViewerServer @ref="viewer" Height="800px">

                <PdfViewerEvents DocumentLoaded="@documentLoad"></PdfViewerEvents>






    SfPdfViewerServer viewer;

    SfDialog dialog;



    public void OnClick(MouseEventArgs args)


        //Method to show the dialog window.




    //Triggers when the dialog is opened.

    public void OnClickopen(MouseEventArgs args)


        //Reads the contents of the file into a byte array, and then closes the file.

        byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/data/HTTPSuccinctly.pdf");

        //Converts the byte array in to base64 string.

        string base64String = Convert.ToBase64String(byteArray);

        //PDF document will get loaded from the base64 string.

        viewer.Load("data:application/pdf;base64," + base64String, null);



    public async Task Load()


      string base64String =       //Provide document base 64 string.

              viewer.Load("data:application/pdf;base64," + base64String, null);



   public string Header { get; set; } = "PDF Viewer";

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDF66F~11365894572.zip

We also suggest loading large-sized documents dynamically.

Kindly find the link for loading the document dynamically - https://blazor.syncfusion.com/documentation/pdfviewer/how-to/load-pdf-document-dynamically

Kindly try this and let us know if you have any concerns.

Live Chat Icon For mobile
Up arrow icon