Getting Started with JavaScript (ES6) PDF Viewer

25 Aug 20264 minutes to read

This section explains how to create and run a TypeScript PDF Viewer application using Syncfusion Essential JS 2 in standalone mode.

Prerequisites

To get started, ensure the following software is installed on your machine:

Create a TypeScript application

Create a simple TypeScript application using the Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. For more information about webpack and its features, refer to the webpack documentation.

Step 1: Open a terminal (command prompt on Windows, or Terminal on macOS/Linux) in the directory where you want the project to live, and clone the quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 2: Navigate to the ej2-quickstart folder.

cd ej2-quickstart

Step 3: By default, the ej2-quickstart repository is preconfigured with the @syncfusion/ej2 package in ./package.json. This package installs all Syncfusion Essential JS 2 components, including the PDF Viewer and other EJ2 controls.

To install only the PDF Viewer component, replace the dependencies with @syncfusion/ej2-pdfviewer in package.json:

"@syncfusion/ej2-pdfviewer": "*"

Step 4: Install the dependent npm packages.

npm install

Import the required CSS styles

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the required PDF Viewer theme style reference to src/styles/styles.css:

@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately.

Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a TypeScript project.

Add the PDF Viewer component

Import the PDF Viewer and inject only the required modules. Update src/app.ts as shown below:

import { PdfViewer, Toolbar, Magnification, Navigation,
         Annotation, LinkAnnotation, ThumbnailView,
         BookmarkView, TextSelection, TextSearch,
         FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation,
                 Annotation, LinkAnnotation, ThumbnailView,
                 BookmarkView, TextSelection, TextSearch,
                 FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();

// Specifies the URL or path of the PDF document to be loaded.
// You can provide a remote URL or a local PDF file path.
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

// Specifies the URL of the PDFium resource files required by the PDF Viewer.
// This should point to the ej2-pdfviewer-lib folder, either from a CDN
// or a locally hosted location.
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

pdfviewer.appendTo('#PdfViewer');

Add a container element for the PDF Viewer in index.html:

<div id="PdfViewer" style="height: 640px"></div>

Run the application

Run the following command to start the TypeScript application:

npm start

The image below shows how the PDF Viewer is rendered in the browser:

Rendered PDF Viewer in browser

View Sample in GitHub. Looking for the full JavaScript PDF Viewer component overview, features, pricing, and documentation? Visit the JavaScript PDF Viewer page.

See also