Getting started with the TypeScript PDF Viewer

17 Feb 20267 minutes to read

This guide describes how to set up and use the Syncfusion PDF Viewer in a TypeScript application, using the Essential JS 2 quickstart seed repository.

The sample project uses a webpack configuration (webpack.config.js) and the latest webpack-cli. Node.js v14.15.0 or later is required. For details, see the webpack getting started guide.

Set up the development environment

Open a command prompt in your target directory.
Clone the Syncfusion Essential JS 2 quickstart project from GitHub:

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

Navigate to the ej2-quickstart folder:

cd ej2-quickstart

Add Syncfusion JavaScript packages

Syncfusion Essential JS 2 packages are available on npmjs.com. The quickstart project includes the @syncfusion/ej2 meta package in package.json.

Install all dependencies:

npm install

Import Syncfusion CSS styles

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

style.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-pdfviewer/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";

pdfviewer.documentPath = window.location.origin + “/pdfsuccinctly.pdf”;
pdfviewer.resourceUrl = window.location.origin + “/ej2-pdfviewer-lib”;

Add the PDF Viewer component

In app.ts, import and inject the required modules, then create and configure the PDF Viewer:

app.ts
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();
   pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
   pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
   pdfviewer.appendTo('#PdfViewer');

To use local resources instead of CDN, follow these steps:
- Ensure the ej2-pdfviewer-lib folder (containing pdfium.js, pdfium.wasm, and the PDF file) is present in your project’s dist directory.
- Set the documentPath and resourceUrl properties to local paths:

app.ts
pdfviewer.documentPath = window.location.origin + "/pdfsuccinctly.pdf";
   pdfviewer.resourceUrl = window.location.origin + "/ej2-pdfviewer-lib";

For a complete example, see load PDF Viewer with local resources.

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

index.html
<!DOCTYPE html>
   <html lang="en">
   <head>
       <title>Essential JS 2</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
       <meta name="description" content="Essential JS 2" />
       <meta name="author" content="Syncfusion" />
       <link rel="shortcut icon" href="resources/favicon.ico" />
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   </head>
   <body>
       <!-- PDF Viewer container -->
       <div id="PdfViewer"></div>
   </body>
   </html>

Run the application

The quickstart project is preconfigured to build and launch in the browser. Start the application with:

npm start

Output:

index.ts
index.html
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();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');
<!DOCTYPE html>
<html lang="en">
<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/31.1.23/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='PdfViewer' style="height:500px;width:100%;"></div>
    </div>
</body>
</html>

Module injection

To enable additional features, inject the required modules using PdfViewer.Inject. The following modules extend the PDF Viewer:

LinkAnnotation: Hyperlink navigation
BookmarkView: Bookmark display and navigation
Magnification: Zoom in/out
Navigation: Page navigation
TextSelection: Text selection
ThumbnailView: Page thumbnails
Toolbar: Built-in toolbar UI
Print: Printing support
Annotation: Annotation features
TextSearch: Text search
FormFields: Form field support
FormDesigner: Form field design and editing

For an overview of features, see the JavaScript PDF Viewer feature tour. To explore core features, view the JavaScript PDF Viewer example.

Search docs

Ask HelpBot