Search results

Getting started with React PDF Viewer component

12 May 2022 / 3 minutes to read

This section explains the steps required to create a simple Essential JS 2 PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.

Dependencies

The following are the list of minimum dependencies required to use the PDF Viewer.

Copied to clipboard
|-- @syncfusion/ej2-react-pdfviewer
|-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdfviewer
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-notifications

Setup for Local Development

You can use create-react-app to setup the applications. To install create-react-app run the following command.

Copied to clipboard
npm install -g create-react-app
  • To setup basic React sample use following commands.
Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install
Copied to clipboard
create-react-app quickstart

cd quickstart

npm install

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

Copied to clipboard
npm install @syncfusion/ej2-react-pdfviewer --save

Adding PDF Viewer component and the CSS reference

Now, you can start adding PDF Viewer component in the application. For getting started, add the PDF Viewer component in src/index.js file and the CSS reference to the public/index.html file.

Place the following code in the public/index.html file.

Copied to clipboard
<!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/20.1.55/material.css" />
</head>
<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

Now, place the following pdfviewer code in the src/index.js.

Copied to clipboard
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, Inject } from '@syncfusion/ej2-react-pdfviewer';
export class App extends React.Component {
render() {
    return (<div>
        <div className='control-section'>
            <PdfViewerComponent id="container" documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" style={{ 'height': '640px' }}>
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]}/>
            </PdfViewerComponent>
        </div>
    </div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));

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

View web service sample in GitHub

Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use the following command to run the application.

Copied to clipboard
npm start

Output will be appears as follows.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 } from '@syncfusion/ej2-react-pdfviewer';
PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner);
export class App extends React.Component {
    render() {
        return (<PdfViewerComponent id="container" height={'640px'} documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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/20.1.55/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>
</head>
<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
Copied to clipboard
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, Inject } from '@syncfusion/ej2-react-pdfviewer';
PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner);
export class App extends React.Component {
render() {
    return (<PdfViewerComponent id="container" height={'640px'} documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" />);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));

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.