Search results

Getting started with JavaScript (ES5) PDF Viewer control

23 Mar 2023 / 2 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 myapp 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.

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

Styles: https://cdn.syncfusion.com/ej2/21.1.35/material.css

Step 3: Create a HTML page (index.html) in myapp 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.

Source
Preview
index.html
Copied to clipboard
<!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/21.1.35/material.css" rel="stylesheet">

          <!-- Essential JS 2 PDF Viewer's script -->            
          <script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
	<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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: "PDF_Succinctly.pdf",
                    serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'
               });
               ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
               //PDF Viewer control rendering starts
               pdfviewer.appendTo('#PdfViewer');
          </script>       
	     <script>
			var ele = document.getElementById('container');
			if(ele) {
				ele.style.visibility = "visible";
			}   
        </script>
	
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

For PDF Viewer serviceUrl creation, follow the steps provided in the link

How to run the PDF Viewer web service

  1. Download the sample from the Web service sample in GitHub link.
  2. Navigate to the ASP.NET Core folder and open it in the command prompt.
  3. Use the below command to restore the required packages.
Copied to clipboard
   dotnet restore
  1. Use the below command to run the web service.
Copied to clipboard
   dotnet run
  1. You can see that the PDF Viewer server instance runs in the localhost with the port number 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.
Copied to clipboard
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "PDF_Succinctly.pdf",
serviceUrl: 'https://localhost:5001/pdfviewer'
});