Getting started with Standalone JavaScript PDF Viewer

22 May 20269 minutes to read

This guide explains how to create and run a JavaScript (ES5) PDF Viewer application using Syncfusion Essential JS 2 in standalone mode.

Setup the development environment

This example uses a simple HTML-based setup with CDN links for Syncfusion components.

Create application folder

Create an app folder pdf-viewer-app for the Essential JS 2 JavaScript components.

Your application structure should look like this:

pdf-viewer-app/
├── index.html
├── index.js

Add style and script references

Add the required Syncfusion® PDF Viewer style and script references to the index.html file using one of the following methods:

To use local scripts and styles for the Syncfusion® PDF Viewer, follow these steps:

Download the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed on your machine.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2/dist/ej2.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2-js-es5/styles/material.css

Alternatively, clone the Essential JS 2 quickstart project and install the required packages by running the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Download the pdfium.js and pdfium.wasm files from the following links:

Syntax:

pdfium.js: https://cdn.syncfusion.com/ej2/{Version}/dist/ej2-pdfviewer-lib/pdfium.js

pdfium.wasm: https://cdn.syncfusion.com/ej2/{Version}/dist/ej2-pdfviewer-lib/pdfium.wasm

Example:

pdfium.js: https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2-pdfviewer-lib/pdfium.js

pdfium.wasm: https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2-pdfviewer-lib/pdfium.wasm

Create a folder named pdf-viewer-app/resources and copy the EJ2 scripts and styles from the installed location into the pdf-viewer-app/resources directory. Include the ej2-pdfviewer-lib folder and PDF documents in the same location. The ej2-pdfviewer-lib folder should contain pdfium.js and pdfium.wasm files.
Add the PDF Viewer and its dependent control style and script references inside the <head> section of your index.html file using local resources.

index.html
<head>
    <title>EJ2 PDF Viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JavaScript PDF Viewer Control">
    <meta name="author" content="Syncfusion">
    <!-- PDF Viewer dependency styles -->
    <link href="resources/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="resources/ej2-notifications/styles/material.css" rel="stylesheet" type="text/css" />
    <!-- PDF Viewer styles -->
    <link href="resources/ej2-pdfviewer/styles/material.css" rel="stylesheet" type="text/css" />
    <!-- PDF Viewer dependency scripts -->
    <script src="resources/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
    <script src="resources/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
    <script src="resources/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
    <script src="resources/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
    <script src="resources/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
    <script src="resources/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
    <script src="resources/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
    <script src="resources/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
    <!-- PDF Viewer scripts -->
    <script src="resources/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
</head>

Reference the scripts and styles directly from the CDN.

Script: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAME}.css

Create an HTML page (index.html) in pdf-viewer-app location and add the CDN link references.

index.html
<head>
    <title>EJ2 PDF Viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JavaScript PDF Viewer Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/material.css" rel="stylesheet">    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-pdfviewer/styles/material.css" rel="stylesheet">
    <!-- Essential JS 2 PDF Viewer's script --> 
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

Adding the PDF Viewer component

Add a container element for the PDF Viewer control in the index.html file and then initialize the control.

index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>EJ2 PDF Viewer</title>
    <!-- Add your style references here -->
</head>
<body>
    <!-- Element which will render as PDF Viewer -->
    <div id="container">
        <div id="PdfViewer" style="height:500px;width:100%;"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

Now, initialize the PDF Viewer component in the index.js file:

index.js
// Initialize PDF Viewer component
var pdfviewer = new ej.pdfviewer.PdfViewer({
    documentPath: window.location.origin + '/resources/pdfsuccinctly.pdf',
    resourceUrl: window.location.origin + '/resources/ej2-pdfviewer-lib'
});

// PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');

index.js
// 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/33.2.3/dist/ej2-pdfviewer-lib'
});

// PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');

NOTE

The documentPath property is used to set the path of the PDF file to be loaded in the PDF Viewer. The resourceUrl property is used to set the path of the PDF Viewer library resources required for PDF rendering. For local resources, ensure the ej2-pdfviewer-lib folder contains the required pdfium.js and pdfium.wasm files.

Run the application

Now run the following command in the console to start the development server. This command serves the application locally on your machine:

npx serve .

After the application starts, open the localhost URL displayed in the terminal in your web browser. The PDF document will be rendered in the browser. The output will appear as follows:

Rendered PDF Viewer in browser