Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

This section explains how to integrate the [ASP.NET MVC PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) into an ASP.NET MVC application using Visual Studio.

N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer.
N> Starting with the 2026 Volume 2 release (July 6, 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer.

## Prerequisites

Expand Down Expand Up @@ -43,12 +43,12 @@ Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }}

> Make sure that the `Microsoft.AspNet.Mvc` package and its dependency packages are updated to the latest version.

## Add namespace
## Add required namespaces

Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.

{% tabs %}
{% highlight c# tabtitle="web.config" %}
{% highlight C# tabtitle="web.config" %}
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
Expand All @@ -60,7 +60,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
Reference a theme and the required scripts from the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:

{% tabs %}
{% highlight c# tabtitle="_Layout.cshtml" %}
{% highlight C# tabtitle="_Layout.cshtml" %}

<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
Expand All @@ -77,7 +77,7 @@ N> To learn other ways to load themes or scripts (such as [NPM packages](https:/
Register the script manager at the end of the `<body>` element in the `~/Views/Shared/_Layout.cshtml` file.

{% tabs %}
{% highlight c# tabtitle="_Layout.cshtml" %}
{% highlight C# tabtitle="_Layout.cshtml" %}

<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
Expand All @@ -90,12 +90,12 @@ Register the script manager at the end of the `<body>` element in the `~/Views/S
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer control in `~/Views/Home/Index.cshtml`. Load a PDF by setting the `DocumentPath` property to a file name or URL, as shown below.

{% tabs %}
{% highlight c# tabtitle="Index.cshtml" %}
{% highlight C# tabtitle="Index.cshtml" %}

<div>
<div style="height:500px;width:100%;">
<!-- DocumentPath specifies the PDF document to load -->
<!-- ServiceUrl specifies the controller endpoint that the viewer uses to communicate with the server -->
<!-- ServiceUrl specifies the controller action that the viewer uses to communicate with the server -->
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
</div>
</div>
Expand All @@ -119,7 +119,8 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m

## Deployment notes

- Unlike the standalone PDF Viewer which performs client-side rendering, the server-backed PDF Viewer processes and renders PDFs entirely on the server. As a result, the following files are **not required** and should be omitted during deployment:
-Unlike the standalone PDF Viewer which performs client-side rendering, the server-backed PDF Viewer processes and renders PDFs entirely on the server. As a result, the following files are **not required** and should be omitted from any deployment bundle:

- `pdfium.js`
- `pdfium.wasm`

Expand All @@ -129,8 +130,8 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m

| **Amazon Web Services (AWS)** |**NuGet package name** |
| --- | --- |
| AWS Lambda|[SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)|
| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)|
| AWS Lambda|[SkiaSharp.NativeAssets.Linux 3.119.1](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)|
| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies 3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)|

- The `serviceUrl` can be updated dynamically at runtime. After updating the value, invoke `pdfViewer.dataBind()` to apply the change and then load the document. This feature is supported in version 23.1.36 or later.

Expand All @@ -140,6 +141,7 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m
}
<script>
function load() {
// ej2_instances is the EJ2 framework's array of component instances attached to the rendered element.
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfViewer.serviceUrl = "@serviceUrl";
pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
Expand All @@ -148,6 +150,13 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m
</script>
```

## Troubleshooting

- **Blank viewer / no requests fired:** verify `ServiceUrl` points to a reachable controller action and that the script manager (`@Html.EJS().ScriptManager()`) is registered at the end of `<body>`.
- **404 on `ServiceUrl` requests:** confirm the route is registered (default attribute routing applies) and the controller returns the `PdfViewerProcessor` response.
- **Missing native assets on Linux:** confirm the `SkiaSharp.NativeAssets.Linux` package (3.119.1) is deployed alongside the app; check the host for `libskiasharp.so` load errors.
- **License warnings in the browser console:** ensure `SyncfusionLicenseProvider.RegisterLicense` is called once at application start.

## See also

- [Getting Started with Syncfusion ASP.NET MVC Standalone PDF Viewer](./getting-started)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ This section explains how to integrate the [ASP.NET MVC PDF Viewer](https://www.

## Install Syncfusion ASP.NET MVC Package in the application

To add .NET PDF Viewer control, the following NuGet packages need to be installed in your ASP.NET MVC application.
To add the .NET PDF Viewer control, the following NuGet package needs to be installed in your ASP.NET MVC application.

* [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5)

Expand Down Expand Up @@ -58,9 +58,9 @@ The theme and required scripts are referenced by using a CDN inside the `<head>`
{% tabs %}
{% highlight c# tabtitle="_Layout.cshtml" %}

<!-- Syncfusion ASP.NET MVC controls styles -->
<!-- Syncfusion EJ2 base styles and Fluent theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<!-- Syncfusion EJ2 base scripts (includes the PDF Viewer module) -->
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{% endhighlight %}
Expand All @@ -83,7 +83,7 @@ Open `~/Views/Shared/_Layout.cshtml` page and register the script manager at the

## Add ASP.NET MVC PDF Viewer control

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer control in `~/Views/Home/Index.cshtml`.
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer control to `~/Views/Home/Index.cshtml`.

{% tabs %}
{% highlight c# tabtitle="Index.cshtml" %}
Expand All @@ -98,14 +98,16 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer
{% endhighlight %}
{% endtabs %}

N> The `DocumentPath` property specifies the PDF document to load in the viewer. To configure [`ResourceUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) and [`DocumentPath`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DocumentPath) with locally available resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
N> The `DocumentPath` property specifies the PDF document to load in the viewer. The `DocumentPath` value can be a remote HTTPS URL (as shown above) or a server-relative path. For locally available PDF documents, scripts, and styles, configure the [`ResourceUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) and `DocumentPath` properties together by following these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).

## Run the application

Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer will render in the default web browser.

![ASP.NET MVC PDF Viewer Control](AspNetMVC_Images/pdfviewer-control.png)

N> If the viewer area is blank or the PDF fails to load, see the [PDF Viewer troubleshooting guide](./troubleshooting/document-loading-issues) for guidance on common issues (404 on the document, CORS, license warnings, and missing scripts).

> A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20MVC%20Razor%20Examples).

## See also
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---

# Getting Started with TypeScript PDF Viewer (Server-Backed)
# Getting Started with Server-Backed TypeScript PDF Viewer

This section 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.
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.

N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer.
N> Starting with the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer.

## Prerequisites

Expand Down Expand Up @@ -100,15 +100,15 @@ Update `src/app.ts` as shown below:

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
import { PdfViewer, Toolbar, Magnification,
import { PdfViewer, Toolbar, Magnification,
Navigation, Annotation, LinkAnnotation,
ThumbnailView, BookmarkView, TextSelection,
TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
ThumbnailView, BookmarkView, TextSelection,
TextSearch, FormFields } from '@syncfusion/ej2-pdfviewer';

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

const pdfviewer: PdfViewer = new PdfViewer({
// Specifies the URL of the server-side PDF Viewer web service
Expand Down Expand Up @@ -144,6 +144,8 @@ 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 the browser*

![Rendered PDF Viewer in browser](images/pdfviewer-control.png)

> [View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)
Expand Down Expand Up @@ -185,7 +187,7 @@ Configure this URL in the `serviceUrl` property of the PDF Viewer.

N> For hosting the web service on Linux, include [SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1). For AWS environments, use the following packages:

| **Amazon Web Services (AWS)** |**NuGet package name** |
| **Amazon Web Services (AWS)** | **NuGet package name** |
| --- | --- |
| AWS Lambda|[SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)|
| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)|
Expand All @@ -194,6 +196,8 @@ N> Looking for the full JavaScript PDF Viewer component overview, features, pric

## See also

- [Getting started in TypeScript PDF Viewer](./getting-started)
Related resources for further exploration:

- [Getting started with Standalone TypeScript PDF Viewer](./getting-started)
- [Open PDF Files](./open-pdf-files)
- [Save PDF Files](./save-pdf-files)
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Setup for Local Development – TypeScript PDF Viewer | Syncfusion
title: Getting Started with the TypeScript PDF Viewer | Syncfusion
description: Learn how to set up and run the Syncfusion TypeScript PDF Viewer in standalone mode using Essential JS 2.
platform: document-processing
control: PDF Viewer
Expand All @@ -26,7 +26,7 @@ Create a simple TypeScript application using the Essential® JS 2 [quickstart](h

> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).

**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub.
**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.

{% tabs %}
{% highlight bash tabtitle="CLI" %}
Expand All @@ -42,7 +42,7 @@ cd ej2-quickstart
{% endhighlight %}
{% endtabs %}

**Step 3:** By default, the `ej2-quickstart` repository is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in `~/package.json`. This package installs all Syncfusion Essential JS 2 components, including the PDF Viewer and other EJ2 controls.
**Step 3:** By default, the `ej2-quickstart` repository is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer) in `package.json`:

Expand Down Expand Up @@ -89,28 +89,28 @@ Import the PDF Viewer and inject only the required modules. Update `src/app.ts`
{% tabs %}
{% highlight ts tabtitle="app.ts" %}

import { PdfViewer, Toolbar, Magnification, Navigation,
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');
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');

{% endhighlight %}
{% endtabs %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ Then import the stylesheet according to your starter:

create-react-router (`app/root.tsx`):

```tsx
```ts
// app/root.tsx
import './app.css';
```
Expand Down
Loading