Getting Started with ReactJS PDF Viewer

6 Jun 20236 minutes to read

This section explains briefly about how to integrate a PDF viewer control in your application with React JS.

Script and CSS Reference

Create a HTML page and add the scripts and CSS references in the order mentioned in the following code example.

<!DOCTYPE html>
    <html>
        <head>
            <!-- Essential Studio for JavaScript  theme reference -->
            <link rel="stylesheet" href="http://cdn.syncfusion.com/14.4.0.15/js/web/bootstrap-theme/ej.web.all.min.css" />           
            <!--  react script  -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
            <!--  jquery script  -->
            <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
            <!-- Essential JS UI widget -->    
            <script src="http://cdn.syncfusion.com/14.4.0.15/js/web/ej.web.all.min.js"></script>
            <script src="http://cdn.syncfusion.com/14.4.0.15/js/common/ej.web.react.min.js"></script>

            <!--Add custom scripts here -->
        </head>
        <body>
        </body>
    </html>

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

NOTE

For themes, you can use the ej.web.all.min.css CDN link from the code snippet given. To add the themes in your application, please refer to this link.

react.js and react-dom.js are the core files needed to create react elements.
browser.min.js file is required for code transform.
ej.web.react.min.js is a react-syncfusion bridge to render Syncfusion components.

Initialize and configure the control

Control can be initialized in two ways.

Using jsx Template
Without using jsx Template

Using jsx Template

By using the jsx template, we can create the html file and jsx file. The .jsx file can be converted into .js file and it can be referred in html page.

Please refer to the code of HTML file.

HTML

<div id="pdfviewercntl"></div>
<script src="app/pdfviewer/default.js"></script>

Initialize the PDF viewer by using the EJ.PdfViewer tag.

HTML

<!DOCTYPE html>
    <html>
        <head>
            <style>
                #PdfViewer {
                width: 100%;
                height: 550px;
                }
            </style>
        </head>
        <body>
            <div id="PdfViewer1" style="width:99%;"></div>
            <script type="text/babel">
		 var servicePath="http://js.syncfusion.com/ejservices/api/PdfViewer";
                 ReactDOM.render(
                     <EJ.PdfViewer id="PdfViewer" serviceUrl={servicePath}></EJ.PdfViewer>,
                     document.getElementById('PdfViewer1')
                );  
            </script>
        </body>
    </html>

Now, the PDF viewer control is rendered with default PDF document, which used in the services.

ReactJS PDF Viewer getting started

Without using jsx Template

PDF viewer can be created from a HTML DIV element with the HTML id attribute set to it. Refer to the following code example.

HTML

<body>
      <div id="pdfviewer1"></div>
    </body>

Initialize the PDF viewer control by adding the following script code to the body section of the HTML document.

HTML

<div id="pdfviewer1"></div>
    <script type="text/javascript">
	var service = "http://js.syncfusion.com/ejservices/api/PdfViewer";
        ReactDOM.render(
        React.createElement(EJ.PdfViewer,
            {
			 serviceUrl:service
            },
            document.getElementById('pdfviewer1')
        );        
    </script>

Now, the PDF viewer control will be rendered with the default PDF document, which is used in the service.

ReactJS PDF Viewer Without using jsx Template