Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ domainurl: ##DomainURL##

This section explains how to create a simple Angular application and add the server-backed [Syncfusion® Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) component with the minimum required setup.

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> As of the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the server-backed 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, refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer.

## Prerequisites

Expand Down Expand Up @@ -82,7 +82,7 @@ Add the following PDF Viewer and dependent component style references to the `sr

Add the PDF Viewer component to your Angular application in server-backed mode. In this mode, the PDF Viewer communicates with a server-side web service through the `serviceUrl` property.

Update `src/app/app.ts` as shown below:
The example below uses a standalone component. The default project uses standalone components, and the root component file is `src/app/app.ts`. Update it as shown below:

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
Expand Down Expand Up @@ -136,7 +136,7 @@ ng serve --open
{% endhighlight %}
{% endtabs %}

After the application starts, open the localhost URL shown in the terminal to view the Angular PDF Viewer component in the browser. The output will appear as follows:
After the application starts, open `http://localhost` (the default Angular dev server URL) in a modern browser such as Chrome, Edge, Firefox, or Safari to view the Angular PDF Viewer component. The output will appear as follows:

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

Expand All @@ -148,8 +148,7 @@ After the application starts, open the localhost URL shown in the terminal to vi

To host your own PDF Viewer service:

1. Download the web service sample from GitHub:
[GitHub Web Service Sample](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices)
1. Download or clone the [EJ2-PDFViewer-WebServices repository](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices).
2. Navigate to the appropriate folder based on your .NET version:
- .NET 6.0 → [PdfViewerWebService_6.0](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_6.0)
- .NET 8.0 → [PdfViewerWebService_8.0](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_8.0)
Expand Down
27 changes: 15 additions & 12 deletions Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ This section explains how to create a simple Angular application and add the sta

## Create an Angular application

Use [Angular CLI](https://angular.dev/installation) to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment.
Use [Angular CLI](https://angular.dev/installation) to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment. Use an Angular CLI version that matches the target Angular version (e.g., Angular CLI 17 for Angular 17 projects).

Install Angular CLI globally, using the following command:
Install Angular CLI globally using the following command:

{% tabs %}
{% highlight bash tabtitle="npm" %}
Expand All @@ -40,7 +40,7 @@ cd pdfviewer-app
{% endhighlight %}
{% endtabs %}

> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools. The available prompts may vary by Angular CLI version; accept the default values for any prompts not listed here.

## Install the Syncfusion® Angular PDF Viewer package

Expand Down Expand Up @@ -78,7 +78,7 @@ Add the following PDF Viewer and dependent component style references to the `sr

## Add the Syncfusion® Angular PDF Viewer component to the application

Add the PDF Viewer component to your Angular application to render and interact with PDF documents. The component requires the **PdfViewerModule** and its associated services.
Add the PDF Viewer component to your Angular application to render and interact with PDF documents. The component requires the **PdfViewerModule** and its associated services (for full functionality).

Update `src/app/app.ts` as shown below:

Expand All @@ -96,10 +96,10 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
selector: 'app-root',
standalone: true,
imports: [PdfViewerModule],
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService],
FormDesignerService, FormFieldsService, AnnotationService, PageOrganizerService],
template: `
<ejs-pdfviewer
id="pdfViewer"
Expand Down Expand Up @@ -133,7 +133,7 @@ ng serve --open
{% endhighlight %}
{% endtabs %}

After the application starts, open the localhost URL shown in the terminal to view the Angular PDF Viewer component in the browser. The output will appear as follows:
After the application starts, open `http://localhost` (the default dev server URL) in the browser to view the Angular PDF Viewer component. The output will appear as follows:

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

Expand All @@ -143,20 +143,23 @@ After the application starts, open the localhost URL shown in the terminal to vi

## Video tutorial

To get started quickly with Angular PDF Viewer, you can watch this video:
If you prefer a video walkthrough, watch the following tutorial to get started quickly with the Angular PDF Viewer.

{% youtube "https://www.youtube.com/watch?v=r8IPr_nTiHo&t=1s" %}

## Angular version compatibility and older versions
## Angular version compatibility

For detailed compatibility information, refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility).

## Older versions

For older Angular versions, refer to the following guides:
* [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 17 and above with the --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 17 and above without the --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)

N> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.
> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.

## See also

- [Getting started with Server-Backed Angular PDF Viewer](./getting-started-with-server-backed)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

This section explains how to add the [Syncfusion® Server-backed ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) to a ASP.NET Core Web application using Visual Studio or Visual Studio Code. A complete working sample is available on [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples).

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.
> **Deprecation notice:** 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 PDF Viewer functionality is 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 All @@ -24,7 +24,7 @@ N> Starting with the 2026 Vol 2 main release (June 2026), no new features will b

## Create a new ASP.NET Core Web App in Visual Studio

Create an ASP.NET Core Web App using Visual Studio 2022 by the following the instructions [here](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=visualstudio).
Create an ASP.NET Core Web App using Visual Studio 2022 by following the instructions [here](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=visualstudio).

## ASP.NET Core PDF Viewer NuGet package installation

Expand Down Expand Up @@ -131,7 +131,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core PDF Viewer

## Implement server-side handlers

Add the server side code to `Index.cshtml.cs` in the `Pages` folder. The class should contain handler methods that process all PDF operations on the server, such as loading documents, rendering pages, handling annotations, and managing downloads.
Add the server-side code to `Index.cshtml.cs` in the `Pages` folder. The class should contain handler methods that process all PDF operations on the server, such as loading documents, rendering pages, handling annotations, and managing downloads.

An implementation example can be found [here](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/blob/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples/Pages/Index.cshtml.cs).

Expand Down Expand Up @@ -175,4 +175,7 @@ function load() {

## See also

* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started)
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started)
* [Migrate from Server-Backed to Standalone PDF Viewer](./server-to-standalone)
* [Getting Started with Standalone PDF Viewer](./getting-started)
* [ASP.NET Core PDF Viewer How-To Guides](./how-to-overview)
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ dotnet restore

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Tag Helper

Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper import. This makes all Syncfusion tag helpers available throughout the application.
Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper imports. This makes all Syncfusion tag helpers (including the PDF Viewer) available throughout the application.

{% tabs %}
{% highlight c# tabtitle="~/_ViewImports.cshtml" %}
Expand All @@ -90,7 +90,7 @@ Reference the Syncfusion theme and JavaScript library using the CDN inside the `
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />

<!-- Syncfusion ASP.NET Core controls scripts -->
<!-- Syncfusion ASP.NET Core controls script -->
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{% endhighlight %}
Expand All @@ -111,7 +111,7 @@ Open the `~/Pages/Shared/_Layout.cshtml` page and register the script manager `<
{% endhighlight %}
{% endtabs %}

## Add ASP.NET Core PDF Viewer control
## Add ASP.NET Core PDF Viewer Tag Helper

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core PDF Viewer Tag Helper in `~/Pages/Index.cshtml`.

Expand All @@ -125,7 +125,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core PDF Viewer
{% endhighlight %}
{% endtabs %}

N> The `documentPath` property specifies the PDF document to load in the viewer. To use the `resourceUrl` and `documentPath` with locally available PDF documents and resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
N> The `documentPath` property can point to a remote URL (as shown above) or to a local PDF file. To use the `resourceUrl` and `documentPath` with locally available PDF documents and resources, follow these [Instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources). For the full list of PDF Viewer properties such as `enableDownload`, `enablePrint`, and `resourceUrl`, see the [PDF Viewer API reference](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html).

## Run the application

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting Started with Server-Backed JavaScript PDF Viewer | Syncfusion
description: Learn how to set up and use the Syncfusion JavaScript PDF Viewer in server-backed mode using CDN resources, injecting modules and web service configuration.
description: Learn how to set up and use the Syncfusion JavaScript PDF Viewer in server-backed mode using CDN resources and web service configuration.
platform: document-processing
control: PDF Viewer
documentation: ug
Expand All @@ -12,7 +12,7 @@ domainurl: ##DomainURL##

This section explains how to create the PDF Viewer component and configure its features in JavaScript (global script) using CDN-hosted resources in **server-backed mode**.

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. This is because almost all 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.

> Ensure that the same version is used for all script and style references to avoid compatibility issues.
Expand Down Expand Up @@ -64,14 +64,15 @@ Add a container element for the PDF Viewer control in the `index.html` file and
{% endhighlight %}
{% endtabs %}

Now, initialize the PDF Viewer component in the `index.js` file:
Now, initialize the Syncfusion® PDF Viewer component in the `index.js` file:

{% tabs %}
{% highlight js tabtitle="index.js" %}

// Initialize PDF Viewer component
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
// Demo service URL for evaluation only. For production, host your own web service.
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});

Expand All @@ -81,6 +82,8 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}

The `documentPath` property sets the URL of the PDF file to load in the viewer and accepts HTTP/HTTPS URLs or relative paths. The `serviceUrl` property must point to a PDF Viewer web service that exposes the required APIs; the web service and the client page must be served from origins that satisfy CORS requirements, and the service must be reachable from the client.

To configure PDF Viewer with local resources for script and style references, and the `documentPath` property, refer to the instructions [here](./how-to/use-local-script-and-style-references).

For creating a new PDF Viewer serviceUrl, follow the steps provided in the [link](./how-to/create-pdfviewer-service) or to locally host an already available web service, follow these [instructions](#run-a-locally-hosted-pdf-viewer-web-service).
Expand Down Expand Up @@ -137,7 +140,7 @@ document.getElementById('load').addEventListener('click', function () {

## Run a locally hosted PDF Viewer web service

1. Download the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices).
1. Download or clone the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) (for example, `git clone https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices.git`).
2. Navigate to the `ASP.NET Core` folder and open it in the command prompt.
3. Navigate to the appropriate subfolder based on your .NET version:

Expand Down Expand Up @@ -169,7 +172,7 @@ dotnet run
{% tabs %}
{% highlight bash tabtitle="CLI" %}

var pdfviewer = new ej.pdfviewer.PdfViewer({
var pdfViewer = new ej.pdfviewer.PdfViewer({
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
serviceUrl: 'https://localhost:7255/pdfviewer'
});
Expand Down
Loading