Syncfusion AI Assistant

How can I help you?

Getting started with the TypeScript PDF Viewer

22 May 20263 minutes to read

This guide 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 the command prompt from the required directory 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 dependency with @syncfusion/ej2-pdfviewer in package.json:

"dependencies": {
  "@syncfusion/ej2-pdfviewer": "*"
}

Step 4: Install the dependent npm packages.

npm install

Add CSS references

Add the required Syncfusion styles to src/styles/styles.css:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';

NOTE

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

Build and launch the application using the following command:

npm start

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

Rendered PDF Viewer in browser

View Sample in GitHub

See also