How to Load a PDF File to the Server-Side in React PDF Viewer?

3 mins read

Description:

This article demonstrates how to load a PDF file into the Syncfusion server-side PDF viewer by retrieving the document as a byte array from the server. It covers both client-side and server-side code to ensure smooth integration with the Syncfusion PDF Viewer component in your web application.

Solution:

To load a PDF file to the server-side PDF viewer, the client-side code sends an HTTP request to fetch the PDF as a byte array from the server. The server then returns the byte array, which is converted to a base64 string on the client-side and loaded into the Syncfusion PDF Viewer.

Prerequisites:

Syncfusion PDF Viewer Setup for ASP.NET Core: Make sure the Syncfusion PDF Viewer is installed and set up in your ASP.NET Core project. Follow the Getting Started with Syncfusion PDF Viewer for ASP.NET Core guide if you haven’t already.
Basic Knowledge of ASP.NET Core: Familiarity with ASP.NET Core development, including the components and basic setup of Core projects, will help you follow along with the implementation.

Code Snippet for Client-Side:

This client-side code snippet retrieves the PDF file from the server, converts it to a base64 string, and loads it into the Syncfusion PDF Viewer.

function LoadDocument() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    var xhr = new XMLHttpRequest();
    var fileName = "PDF_Succinctly.pdf";
    xhr.open('GET', `/PdfViewer/GetPDFByte?fileName=`+fileName, true);
    xhr.responseType = "arraybuffer";
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var blob = new Blob([xhr.response], { type: 'application/pdf' });
            var reader = new FileReader();
            reader.onload = function () {
                var base64String = reader.result;
                viewer.load(base64String);
            };
            reader.readAsDataURL(blob);
        }
    };
    xhr.send();
}

Code Snippet for Server-Side:

The server-side code retrieves the PDF file as a byte array and sends it back to the client for loading into the viewer.

[HttpGet]
//Get action for obtaing the byte array of the PDF document
public IActionResult GetPDFByte(string fileName)
{
    string documentPath = GetDocumentPath(fileName);
    // Read the file content into a byte array
    byte[] fileBytes = System.IO.File.ReadAllBytes(documentPath);
    // Return the byte array as a file
    return File(fileBytes, "application/pdf", fileName);
}

Key Features Used in the Code:

XHR Request for File Retrieval: Used to fetch the PDF document as a byte array from the server.
Base64 String Conversion: Converts the byte array into a base64 string before loading it into the viewer.

Sample:

You can find the full sample in our GitHub repository.

Steps to Load the Document:

Run the sample application.
Click the “Load Document” button.
The PDF document will load into the Syncfusion PDF Viewer.

Conclusion:

I hope this article helped you learn on how to load a PDF file to the server-side React PDF Viewer.

You can refer to React PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)