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.
The following are the list of minimum dependencies required to use the PDF Viewer.
|-- @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
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
npm install
create-react-app quickstart
cd quickstart
npm install
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
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.
<!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
.
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
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.
npm start
Output will be appears as follows.
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'));
<!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>
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.