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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamically Updating PDF Viewer via Base64 string

Thread ID:

Created:

Updated:

Platform:

Replies:

146253 Jul 28,2019 11:55 PM UTC Jul 31,2019 07:13 AM UTC Blazor 3
loading
Tags: PDF Viewer
Dominick Marciano
Asked On July 28, 2019 11:55 PM UTC

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 [Syncfusion]
Replied On July 29, 2019 09:01 AM UTC

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. 


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

Regards, 
Rajasekar 


Dominick Marciano
Replied On July 30, 2019 11:50 PM UTC

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 [Syncfusion]
Replied On July 31, 2019 07:13 AM UTC

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, 


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, 

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon