React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with React PDF Viewer component

15 Oct 2021 / 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 CSS reference

Add components style as given below in src/App.css.

Copied to clipboard
@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-react-pdfviewer/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

To refer App.css in the application then import it in the src/App.tsx file.

Adding PDF Viewer component

Now, you can start adding PDF Viewer component in the application. For getting started, add the PDF Viewer component in src/App.tsx file using following code.

Place the following pdfviewer code in the src/App.tsx.

Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';

import './App.css';
class App extends React.Component<{}, {}>{
render() {
    return    <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]} />
        </PdfViewerComponent>
}
};
ReactDOM.render(<App />, document.getElementById('container'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
import './App.css';
class App extends React.Component {
    render() {
        return <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]}/>
        </PdfViewerComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('container'));

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

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.html
index.tsx
index.jsx
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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 href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-pdfviewer/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-pdfviewer/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/fabric.css" rel="stylesheet" />   
    <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, Inject } from '@syncfusion/ej2-react-pdfviewer';
import { RouteComponentProps } from 'react-router';

export class App extends React.Component<{}, {}> {
  render() {
return ( <div>
    <div className='control-section'>
        {/* Render the PDF Viewer */}
        <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]} />
        </PdfViewerComponent>
      </div>
    </div>
);
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
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, 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]}/>
        </PdfViewerComponent>
      </div>
    </div>);
    }
}
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.

Previous
Next