Getting Started with the TypeScript PDF Viewer

24 Jun 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 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 dependencies with @syncfusion/ej2-pdfviewer in package.json:

"@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

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

NOTE

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