Getting Started with Standalone PDF Viewer component
22 Sep 20239 minutes to read
This section explains the steps required to create a simple Standalone React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
Prerequisites
To get started with Syncfusion React UI components, ensure the compatible version of React.
- React supported version >=
15.5.4+
. - Required node version >=
14.0.0+
(NPM Package Manager).
Setup for Local Development
-
Create a new React app
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 ```
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
npm install @syncfusion/ej2-react-pdfviewer --save
-
Copy the contents of the ej2-pdfviewer-lib folder from ./node_modules/@syncfusion/ej2-pdfviewer/dist to the public directory using the command:
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/ej2-pdfviewer-lib
-
Confirm that there is an ‘ej2-pdfviewer-lib’ directory within your public directory.
-
Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the Troubleshooting section.
Adding PDF Viewer component and the CSS reference
-
Add an HTML div element to act as the PDF Viewer element
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>
-
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 React PDF Viewer as below in
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'; function App() { return (<div> <div className='control-section'> <PdfViewerComponent id="container" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" 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 />);
Run the application
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, Inject} from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (<div>
<div className='control-section'>
<PdfViewerComponent
id="container"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
style=height>
{/* Inject the required services */}
<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 />);
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="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
style=height>
{/* Inject the required services */}
<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 />);
<!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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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.