Syncfusion AI Assistant

How can I help you?

Getting started with server-backed React PDF Viewer component

21 May 20266 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

System requirements for Syncfusion® React components

Create a React application

Use Vite to create a new React application, as it provides a faster development environment, smaller bundle sizes, and optimized production builds.

To create a new React application, run one of the following commands based on your preferred environment.

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

Install the Syncfusion® PDF Viewer packages

Install the React PDF Viewer package from npm using the following command:

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

Adding PDF Viewer component and the CSS reference

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 following import statements for the PDF Viewer along with the default imports in the file (src/index.js when using JavaScript/JSX, or src/app.tsx when using TypeScript/TSX), and include the PDF Viewer initialization code inside the function to render the PDF Viewer component.

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"
        // Specifies the path or Base64 string of the PDF document to be loaded in the PDF Viewer.
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        // Specifies the backend service URL that processes and streams PDF data
        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
        style={{ 'height': '640px' }}>
         // Specifies the modules required for the PDF Viewer
         <Inject services={[ Toolbar, Magnification, Navigation, Annotation,
                        LinkAnnotation, BookmarkView, ThumbnailView, Print,
                        TextSelection, TextSearch, FormFields, FormDesigner ]}/>
      </PdfViewerComponent>
    </div>
  </div>);
}
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"
      // Specifies the path or Base64 string of the PDF document to be loaded in the PDF Viewer.
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      // Specifies the backend service URL that processes and streams PDF data
      serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
      style={{ 'height': '640px' }}>
          // Specifies the modules required for the PDF Viewer
         <Inject services={[ Toolbar, Magnification, Navigation, Annotation,
          LinkAnnotation, BookmarkView,ThumbnailView, Print, TextSelection,
          TextSearch, FormFields,FormDesigner ]}/>
     </PdfViewerComponent>
 </div>
</div>);
}

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.

How to Create and Run a Custom PDF Viewer Web Service

Run the application

Use the following command to run the application in browser.

npm run dev

After the application starts, open the localhost URL shown in the terminal to view the React PDF Viewer in the browser. The output will appear as follows:

React PDF Viewer Control

You can also explore the PDF Viewer interactively using the live sample below.

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.

NOTE

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

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

See also