Getting started with JavaScript PDF Viewer (server-backed)

27 Apr 20266 minutes to read

This guide explains how to create the PDF Viewer component and configure its features in JavaScript (global script) using CDN-hosted resources in server-backed mode.

Ensure that the same version is used for all script and style references to avoid compatibility issues.

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.

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="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.

index.html
<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',
            serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
        });
        // 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 property, refer to the instructions here.

For creating a new PDF Viewer serviceUrl, follow the steps provided in the link or to locally host an already available web service, follow these instructions.

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 .

Deployment notes

The PDF Viewer supports dynamically changing the serviceURL. After changing serviceUrl at runtime, call pdfViewer.dataBind() to apply the new value. This behavior applies to versions after 23.1.36.

 document.getElementById('load').addEventListener('click', function () {
    pdfViewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
    pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
    pdfViewer.dataBind();
    pdfViewer.load(pdfViewer.documentPath, null);
 });

The demo Web API hosted at https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer is provided for evaluation only. For production, host a web service with appropriate server configuration. See the GitHub Web Service example or the Docker image for reference. Standalone mode is recommended for client-side rendering.
The server-backed PDF Viewer does not require pdfium.js and pdfium.wasm files. Those files are used by the standalone viewer for client-side rendering; server-backed setups render PDFs on the server and therefore do not need to include them in deployment.
For hosting the web service on the Linux platform, ensure to include the SkiaSharp.NativeAssets.Linux.

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 v3.119.1

Run a locally hosted PDF Viewer web service

Download the sample from the Web service sample in GitHub.
Navigate to the ASP.NET Core folder and open it in the command prompt.
Navigate to the appropriate subfolder based on your .NET version:
- .NET 6.0 → PdfViewerWebService_6.0
- .NET 8.0 → PdfViewerWebService_8.0
Use the following command to restore the required packages.
```
dotnet restore
```
Use the following command to run the web service.
```
dotnet run
```
The PDF Viewer server instance runs at https://localhost:7255. Navigate to https://localhost:7255/pdfviewer, which returns the default GET response method. Bind this link to the serviceUrl property of the PDF Viewer as shown below.
```
var pdfviewer = new ej.pdfviewer.PdfViewer({
   documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
   serviceUrl: 'https://localhost:7255/pdfviewer'
});
```

Search docs

Ask Syncfusion AI Assistant