SfPdfViewerServer coming up with blank Screen

[Sheldon]

Hello,

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>
        </SfDialog>

 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?

Thanks

[Sheldon]

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.

Thanks

Sheldon 

[Sheldon]

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 :)

Sheldon

[Sheldon]

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.

Sheldon

[Visvesvar Venkatesan]

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>

 

    </SfDialog>

 

</div>

    SfPdfViewerServer viewer;

    SfDialog dialog;

 

 

    public void OnClick(MouseEventArgs args)

    {

        //Method to show the dialog window.

        this.dialog.Show(true);

    }

 

    //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.