Dynamically Updating PDF Viewer via Base64 string

[Dominick Marciano]

I am trying to update the PDF Viewer data in a Blazor server-side project.  When the user clicks on a button, it retrieves the PDF's Base64 string from a service and then should update the viewer.  I have tried setting the document path directly on the viewer via its reference, calling the DataBind() method, as well as StateHasChanged() but the PDF is never shown in the viewer.  I have confirmed that the Base64 string is valid because if I use JS interop and download the file, the PDF opens without any problem.  Is there a way to dynamically update the displayed PDF (via a Base64 string) and, if so, what is the proper way?

Thank you.

[Rajasekar G]

Hi Dominick, 

Thank you for contacting Syncfusion support. 

We support DocumentPath property to load the PDF document when the PDF Viewer control is loaded initially. However, we can load the PDF document as a base64 string in the PDF Viewer control using Load() method after the control initialization. Please find the code snippet for loading the PDF document as base64 string using Load() method in PDF Viewer control below. 

Code Snippet 

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

    string base64String = Convert.ToBase64String(byteArray); 

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

We have created a simple blazor server-side application for your reference and it can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146253/ze/PdfViewer_Blazor-54886766 

Please let us know if you have any doubt on this. 

Regards, 

Rajasekar 

[Dominick Marciano]

For some reason it is still not working in my project.  In my method, I have:

pdfData = $"data:application/pdf;base64,{Convert.ToBase64String(result.Data)}";

ejsPdfViewer.Load(pdfData, null);

Where result.Data is a byte array returned from a service.  

And the control is defined as:

<EjsPdfViewer @ref="ejsPdfViewer" ID="ejsPdfViewer" Width="1060px" Height="500px"></EjsPdfViewer>

However the Chrome console is showing the following error message:

blazor.server.js:8 Uncaught (in promise) Error: System.ArgumentException: The assembly 'Syncfusion.EJ2.Blazor' does not contain a public method with [JSInvokableAttribute("GetPDFInfo")].

   at Microsoft.JSInterop.DotNetDispatcher.GetCachedMethodInfo(:44361/AssemblyKey assemblyKey, String methodIdentifier)

   at Microsoft.JSInterop.DotNetDispatcher.InvokeSynchronously(:44361/String assemblyName, String methodIdentifier, Object targetInstance, String argsJson)

   at Microsoft.JSInterop.DotNetDispatcher.BeginInvoke(:44361/String callId, String assemblyName, String methodIdentifier, Int64 dotNetObjectId, String argsJson)

    at endInvokeDotNetFromJS (blazor.server.js:8)

    at blazor.server.js:8

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (blazor.server.js:8)

    at blazor.server.js:1

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (blazor.server.js:1)

    at e.processIncomingData (blazor.server.js:1)

    at e.connection.onreceive (blazor.server.js:1)

    at WebSocket.i.onmessage (blazor.server.js:1)

If I take the same data string though (pdfData) and pass it to the following JavaScript function:

function downloadPdf(source, fileName) {

    var link = document.createElement('a');

    link.rel='nofollow' href = source;

    link.target = "_blank";

    link.download = fileName;

    link.click();

}

The PDF will download and open without any issue

[Rajasekar G]

Hi Dominick, 

Thank you for your update. 

We suspect this issue due to, You have tried to use client-side Blazor PDF Viewer in your application without defining ServiceUrl.  We have provided two separate PDF Viewer component for Blazor server-side and client-side applications. Client-side PDF Viewer depends on server-side processing to render the PDF files, it is mandatory to create a web service as mentioned in the following link, 

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core 

For your requirement using client-side Blazor application, use the following code snippet, 

@using Syncfusion.EJ2.Blazor.PdfViewer 

@using Syncfusion.EJ2.Blazor.Buttons 

 

<EjsButton @onclick="@clicked">Load Document</EjsButton> 

<EjsPdfViewer DocumentPath="@DocumentPath" Height="500px" Width="1060px" @ref="@Viewer" 

              ServiceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"></EjsPdfViewer> 

 

@code{ 

    EjsPdfViewer Viewer; 

    private string DocumentPath { get; set; } = "PDF_Succinctly.pdf"; 

 

    public void clicked() 

    { 

        // Provide the PDF file path to be loaded here 

        byte[] byteArray = System.IO.File.ReadAllBytes("Hive_Succinctly.pdf"); 

        string base64String = Convert.ToBase64String(byteArray); 

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

    } 

} 

Note:  Here ServiceUrl created from the steps provided in the previous link. 

For your more information, please refer the following documentation link, 

https://ej2.syncfusion.com/aspnet-core-blazor/documentation/pdfviewer/getting-started/client-side-application/ 

Can you please confirm whether you are using client-side or server-side blazor application. That would be helpful for us to provide the solution earlier. 

Please let us know if you have any doubt on this. 

Regards, 

Rajasekar