Getting started in EJ2 JavaScript PDF Viewer control

25 Mar 20257 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

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/29.1.33/ej2-base/styles/material.css" rel="stylesheet">    
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-pdfviewer/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">    
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">

     <!-- Essential JS 2 PDF Viewer's script --> 
     <script src="https://cdn.syncfusion.com/ej2/29.1.33/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",
                    serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer'
               });
               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>	
</script>
</body></html>

NOTE

We have provided the support to dynamically change the serviceURL. So, after changing the serviceURL dynamically, you need invoke the pdfViewer.dataBind() method to update the serviceURL quickly. This will effectively change the serviceURL dynamically. Ensure that this step is performed after version 23.1.36.
document.getElementById(‘load’).addEventListener(‘click’, function () {
pdfViewer.serviceUrl = “https://services.syncfusion.com/angular/production/api/pdfviewer”;
pdfViewer.documentPath = “https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf”;
pdfViewer.dataBind();
pdfViewer.load(pdfViewer.documentPath, null);
});

NOTE

The Web API hosted link https://services.syncfusion.com/js/production/api/pdfviewer utilized in the PDF viewer’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property. We strongly recommend using the standalone mode.

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.

    dotnet restore

  4. Use the below command to run the web service.

    dotnet run

5.You can see that the PDF Viewer server instance runs in the local host 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.

var pdfviewer = new ej.pdfviewer.PdfViewer({
    documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
    serviceUrl: 'https://localhost:5001/pdfviewer'
});

NOTE

When configuring the server-backed PDF viewer, it’s essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context.

NOTE

For hosting the web service on the Linux platform, ensure to include the SkiaSharp.NativeAssets.Linux. Additionally, for AWS environments, utilize the following packages:

Amazon Web Services (AWS) NuGet package name
AWS Lambda SkiaSharp.NativeAssets.Linux
AWS Elastic Beanstalk SkiaSharp.NativeAssets.Linux.NoDependencies v2.88.6