Syncfusion AI Assistant

How can I help you?

Getting started with TypeScript PDF Viewer (Server-Backed)

22 May 20264 minutes to read

This guide explains how to create and run the TypeScript PDF Viewer in server-backed mode. In this mode, PDF rendering and processing are performed on a server-side web service, while the TypeScript application acts as the client.

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

To load and display a PDF in server-backed mode, configure the PDF Viewer with the serviceUrl property.

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);

const pdfviewer: PdfViewer = new PdfViewer({
  // Specifies the URL of the server-side PDF Viewer web service
  serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});

pdfviewer.appendTo('#PdfViewer');

// Load a PDF document through the server
pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', '');

Add a container element in index.html:

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

Note: The Web API service URL shown above is provided for evaluation only. For production, host your own PDF Viewer web service.

Run the application

Run the application using the following command:

npm start

The application will connect to the configured PDF Viewer web service and render the document in the browser. The image below shows how the PDF Viewer is rendered in the browser:

Rendered PDF Viewer in browser

View Sample in GitHub

Run the PDF Viewer web service

To host your own PDF Viewer web service:

  1. Download the web service sample from GitHub:
    GitHub Web service sample
  2. Navigate to the appropriate folder based on your .NET version:
  3. Restore and run the service:
dotnet restore
dotnet run

The service will run at:

https://localhost:7255/pdfviewer

Configure this URL in the serviceUrl property of the PDF Viewer.

Important: In server-backed mode, do not include pdfium.js or pdfium.wasm. All rendering is performed on the server.

NOTE

For hosting the web service on Linux, include SkiaSharp.NativeAssets.Linux. For AWS environments, use 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

See also