Getting started in Standalone PDF Viewer control

18 Oct 20244 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Step 1: Create an app folder my-app for the Essential JS 2 JavaScript components.

Step 2: The Essential JS 2 component’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js

Styles: https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css

Example:

Script: https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2.min.js

Styles: https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css

NOTE

While referring the scripts from the downloaded resources in your application, make sure to place the ‘ej2-pdfviewer-lib’ assets in the same directory as the ‘ej2.min.js’ script.

Step 3: Create a HTML page (index.html) in my-app location and add the CDN link references. Now, add the Div element and initiate the Essential JS 2 PDF Viewer component in the index.html by using following code.

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
     <title>Essential JS 2</title>
     <!-- Essential JS 2 material theme -->
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">    
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">    
     <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">

     <!-- Essential JS 2 PDF Viewer's script --> 
     <script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
     
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
     <body>
          <!--element which is going to render-->
          <div id="container">
               <div id="PdfViewer" style="height:580px;width:100%;"></div>
          </div>
          <script>                
               //Initialize PDF Viewer component
               var pdfviewer = new ej.pdfviewer.PdfViewer({
                    documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
                    resourceUrl:'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib'
               });
               ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
               
               //PDF Viewer control rendering starts
               pdfviewer.appendTo('#PdfViewer');
          </script>       
	     <script>
			var ele = document.getElementById('container');
			if(ele) {
				ele.style.visibility = "visible";
			}   
        </script>
</body></html>

Step 4: Now, run the index.html in web browser, it will render the Essential JS 2 PDF Viewer component.