HelpBot Assistant

How can I help you?

Getting started with server-backed React PDF Viewer component

14 Mar 202613 minutes to read

This section explains the steps to create a server-backed React PDF Viewer and demonstrates basic usage of the PDF Viewer component in a React application.

Prerequisites

To get started with Syncfusion^® React UI components, ensure the compatible version of React.

React supported version >= 15.5.4+.
Required node version >= 14.0.0+(NPM Package Manager).

Setup for Local Development

To set up a React application, use Vite (for example, npm create vite@latest), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to traditional tools such as create-react-app. For detailed steps, refer to the Vite installation instructions.

NOTE

To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Adding Syncfusion^® packages

All the available Essential^® JS 2 packages are published in npmjs.com public registry.
To install PDF Viewer component, use the following command

npm install @syncfusion/ej2-react-pdfviewer --save

NOTE

The following changes apply to React version 18 and above.

Adding PDF Viewer component and the CSS reference

Add an HTML div element to act as the PDF Viewer element index.html using the following code.

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <title>Syncfusion React PDF Viewer</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="Essential JS 2 for React Components" />
   <meta name="author" content="Syncfusion" />
   </head>
   <body>
      <div id='sample'>
         <div id='loader'>Loading....</div>
         <script type="module" src="/src/main.tsx"></script>
      </div>
   </body>
   </html>

Add the React PDF Viewer component’s CSS reference as given below in src/index.css file.

   @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
   @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
   @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";

Add the React PDF Viewer as below in src/index.js file to render the PDF Viewer component.

JSX
TSX
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';

function App() {
    return (<div>
    <div className='control-section'>
    {/* Render the PDF Viewer */}
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
        style={{ 'height': '640px' }}>

         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                             ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import  { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
          ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (<div>
 <div className='control-section'>
     <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
      style={{ 'height': '640px' }}>
         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                             ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
     </PdfViewerComponent>
 </div>
</div>);
}
const rootElement = document.getElementById('sample')!;
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer utilized in the PDF viewer’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property. We strongly recommend using the standalone mode.

Run the application

Use the following command to run the application in browser with the port number localhost:8080.

npm start

NOTE

When running the sample, if you encounter the ERR_OSSL_EVP_UNSUPPORTED error error, you need to run the following command in your terminal to resolve this issue. This error is related to OpenSSL, which is a cryptographic library used by Node.js for secure communication and encryption tasks. This specific error typically occurs when Node.js is trying to use cryptographic algorithms or routines that are not supported by the current version of OpenSSL being used.

$env:NODE_OPTIONS = "--openssl-legacy-provider"

Output will be appears as follows.

index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import  { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject} from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (<div>
    <div className='control-section'>
        <PdfViewerComponent 
            id="container" 
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" 
            serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
            height= '640px'>
               {/* Inject the required services */}
               <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
                                   Print, TextSelection, TextSearch, FormFields, FormDesigner,PageOrganizer]} />
        </PdfViewerComponent>
    </div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import  { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject} from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (<div>
    <div className='control-section'>
        <PdfViewerComponent 
            id="container" 
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
            serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
            height= '640px'>
               {/* Inject the required services */}
               <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
                                   Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
        </PdfViewerComponent>
    </div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion React PDF Viewer</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
            <script type="module" src="/src/main.tsx"></script>
        </div>
</body>
</html>

For PDF Viewer serviceUrl creation, follow the steps provided in the link

How to run the PDF Viewer web service

1.Download the sample from the Web service sample in GitHub link.

2.Navigate to the ASP.NET Core folder and open it in the command prompt.

3.Navigate to the appropriate subfolder based on your .NET version:

.NET 6.0 → PdfViewerWebService_6.0
.NET 8.0 → PdfViewerWebService_8.0

4.Use the below command to restore the required packages.

dotnet restore

5.Use the below command to run the web service.

dotnet run

6.You can see that the PDF Viewer server instance runs in the local host with the port number localhost:5001 and navigate to the PDF Viewer Web control localhost:5001/pdfviewer which returns the default get response method. We can bind the link to the serviceUrl property of PDF Viewer as below.

   <PdfViewerComponent
      id="container"
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:5001/pdfviewer"
      style={{ 'height': '640px' }}>
        <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                            ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
   </PdfViewerComponent>

NOTE

When configuring the server-backed PDF viewer, it’s Essential^® to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context.

View sample in GitHub.

You can refer to our React PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our React PDF Viewer example to understand how to explains core features of PDF Viewer.

NOTE

For hosting the web service on the Linux platform, ensure to include the SkiaSharp.NativeAssets.Linux. Additionally, for AWS environments, utilize the following packages:

Amazon Web Services (AWS)	NuGet package name
AWS Lambda	SkiaSharp.NativeAssets.Linux
AWS Elastic Beanstalk	SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with server-backed React PDF Viewer component

Prerequisites

Setup for Local Development

Adding Syncfusion^® packages

Adding PDF Viewer component and the CSS reference

Run the application

How to run the PDF Viewer web service

How can I help you?

Getting started with server-backed React PDF Viewer component

Prerequisites

Setup for Local Development

Adding Syncfusion® packages

Adding PDF Viewer component and the CSS reference

Run the application

How to run the PDF Viewer web service

Adding Syncfusion^® packages