This section explains the steps required to create a simple React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
To get started with Syncfusion React UI components, ensure the compatible version of React.
15.5.4+
.14.0.0+
(NPM Package Manager).create-react-app
and install it using the following command. npm install -g create-react-app
To setup basic 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
public/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>
</div>
</body>
</html>
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";
src/index.js
file to render the PDF Viewer component.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';
export function App() {
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>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
Use the following command to run the application in browser with the port number localhost:8080
.
npm start
Output will be appears as follows.
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 } from '@syncfusion/ej2-react-pdfviewer';
PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner);
export function App() {
return (<PdfViewerComponent id="container" height={'640px'} documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"/>);
}
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/20.4.48/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 './index.css';
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 function App() {
return (<PdfViewerComponent id="container" height={'640px'} documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" />);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
For PDF Viewer serviceUrl creation, follow the steps provided in the link
ASP.NET Core
folder and open it in the command prompt. dotnet restore
dotnet run
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>
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.