Syncfusion AI Assistant

How can I help you?

Getting started with Standalone JavaScript PDF Viewer

27 Apr 20263 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.

Note: Standalone mode renders PDF files directly in the browser without requiring a server-side web service. Essential JS 2 for JavaScript provides an ES5-compatible global script build that works in modern browsers without a build step.

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 my-app for the Essential JS 2 JavaScript components.

Add style and script references

The Essential JS 2 component’s global scripts and styles are hosted at the following 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/33.2.3/dist/ej2.min.js

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

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

<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="Typescript 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 the Div element and initiate the PDF Viewer component in the index.html by using the following code.

<body>
    
    <div id="container">
        <div id="PdfViewer" style="height:500px;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/33.2.3/dist/ej2-pdfviewer-lib'
        });
        // PDF Viewer control rendering starts
        pdfviewer.appendTo('#PdfViewer');
    </script>
</body>

To configure PDF Viewer with local resources for script and style references, and the documentPath and resourceUrl properties, refer to the instructions here.

Run the application

Run the index.html in a web browser using a local web server. The PDF document will be rendered in the browser.

npx serve .

See also