Syncfusion AI Assistant

How can I help you?

Getting Started with Server-Backed ASP.NET Core PDF Viewer

24 Apr 20267 minutes to read

This article shows how to add the Syncfusion® Server-backed ASP.NET Core PDF Viewer to a ASP.NET Core Web application using Visual Studio or Visual Studio Code. A complete working sample is available on GitHub.

Prerequisites

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.

ASP.NET Core PDF Viewer NuGet package installation

To add the ASP.NET Core PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install:

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

Create an ASP.NET Core Web App in Visual Studio Code using the following commands:

dotnet new webapp -o WebApp
cd WebApp

ASP.NET Core PDF Viewer NuGet package installation

Install the Syncfusion® ASP.NET Core component NuGet packages within the project.

dotnet add package Syncfusion.EJ2.AspNet.Core -v 33.2.3
dotnet add package Syncfusion.EJ2.PdfViewer.AspNet.Core -v 33.2.3
dotnet restore

Add Syncfusion® 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.

@addTagHelper *, Syncfusion.EJ2

Add style sheet

Reference the Syncfusion theme using the CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml. This stylesheet provides styling for all Syncfusion components including the PDF Viewer.

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.3/fluent.css" />
</head>

NOTE

See the Themes topic for different ways to reference styles in an ASP.NET Core application, including CDN, NPM package, and CRG.

Add script reference

Add the Syncfusion JavaScript library using the CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml. This script provides the core functionality for all Syncfusion components.

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

To use locally availabe script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts)

Register Syncfusion® Script Manager

Open ~/Pages/Shared/_Layout.cshtml and register the script manager at the end of the <body> tag. The script manager initializes Syncfusion components and manages their life cycle.

<body>
    ....
    ....
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

NOTE

Add the script manager <ejs-scripts> at the end of the <body>.

Add ASP.NET Core PDF Viewer control

Add the Syncfusion® ASP.NET Core PDF Viewer tag helper in ~/Pages/Index.cshtml. The serviceUrl property is essential for server-backed mode, as it specifies the server endpoint that handles all PDF processing operations.

@page "{handler?}"
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

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.

An implementation example can be found here.

Run the application

Run the app to display the PDF in the Syncfusion® ASP.NET Core PDF Viewer in the browser.

ASP.NET Core PDF Viewer control in action

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:
    • pdfium.js
    • pdfium.wasm

  • 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
  • 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.
function load() {
    var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
    pdfViewer.serviceUrl = "/Index";
    pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
    pdfViewer.dataBind();
}

See also