HelpBot Assistant

How can I help you?

Getting Started with Standalone ASP.NET Core PDF Viewer

28 Feb 20267 minutes to read

The ASP.NET Core PDF Viewer control is a standalone solution for viewing, printing, and interacting with PDF files in web applications. Client-side rendering eliminates server processing overhead, enabling responsive performance for most use cases. The control provides a comprehensive reading experience with zooming, scrolling, text search, text selection, and text copying. Built-in support for thumbnails, bookmarks, hyperlinks, and tables of contents ensures seamless navigation within and across PDF documents. Users can also annotate documents and fill form fields directly within the viewer.

Prerequisites

Before starting the setup, ensure the following requirements are met:

Integrate PDF Viewer into an ASP.NET Core application

Step 1: Create a new ASP.NET Core project

  1. Start Visual Studio and select Create a new project.
  2. In the Create a new project dialog, select ASP.NET Core Web App.
    Create new ASP.NET Core Web App project
  3. In the Configure your new project dialog, enter the project name and select Next.
    Set project name and location
  4. In the Additional information dialog, select a .NET LTS version (for example, .NET 6.0 (Long-term Support)) and then select Create.
    Select target framework

ASP.NET Core PDF Viewer NuGet package installation

Step 2: Install required NuGet packages

To add Syncfusion ASP.NET Core controls to the application, use the NuGet package manager. Open the Package Manager Console or use the NuGet Package Manager UI in Visual Studio and install the Syncfusion.EJ2.AspNet.Core package.

Install-Package Syncfusion.EJ2.AspNet.Core -Version 32.2.3

Add Syncfusion® ASP.NET Core Tag Helper

Step 3: Import the 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

Step 4: Add component styles (using CDN)

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/32.2.3/fluent.css" />
</head>

NOTE

Check out the Themes topic to learn different ways (CDN, NPM package, and CRG) to reference styles in an ASP.NET Core application and achieve the expected appearance for Syncfusion® ASP.NET Core controls.

Add script reference

Step 5: Add component scripts

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

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

Using local resources

Step 5b: Add local scripts and styles (alternative to CDN)

For offline deployment or when CDN access is restricted, you can use local resources. To load the PDF Viewer with local resources, follow these steps:

Step 1: Place the ej2.min.js script and the required theme CSS files in the wwwroot folder of the ASP.NET Core application.

Step 2: Reference the local script and style files in the <head> of _Layout.cshtml, replacing CDN links with local file paths.

By following these steps, the PDF Viewer will load the required resources locally. See the code snippet below for reference.

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="~/material.min.css" />
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="~/ej2.min.js"></script>
</head>

Register Syncfusion® Script Manager

Step 6: Register the script manager

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

<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> element.

Add ASP.NET Core PDF Viewer control

Step 7: Add the PDF Viewer component

Add the Syncfusion® ASP.NET Core PDF Viewer Tag Helper in ~/Pages/Index.cshtml. The documentPath property specifies the PDF document to load.

Example: Using CDN resources with a remote PDF URL

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

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

Code explanation:

  • ejs-pdfviewer: The tag helper that renders the PDF Viewer control with the id pdfviewer
  • documentPath: Specifies the PDF document to load. Accepts either:
    • An absolute URL (HTTP/HTTPS) pointing to a remote PDF
    • A relative path to a local PDF file in the wwwroot folder

Configure PDF Viewer for local resources

To use the resourceUrl and documentPath locally with the PDF Viewer, follow these steps:

Step 1: Ensure the application includes an ej2-pdfviewer-lib folder under wwwroot (or a publicly accessible static path). This folder must contain:

  • pdfium.js and pdfium.wasm files
  • The PDF file(s) to display
  • Keep these in the same static content area as ej2.min.js and related CSS files

Step 2: Assign local paths to the documentPath and resourceUrl properties:

  • documentPath: Path to the PDF file relative to the application root
  • resourceUrl: Path to the ej2-pdfviewer-lib directory containing rendering resources

By following these steps, the standalone PDF Viewer will load all resources locally. See the code snippet below for reference.

@page "{handler?}"
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    var originUrl = $"{Request.Scheme}://{Request.Host}{Request.PathBase}";
    var document = originUrl + "/PDF_Succinctly.pdf";
    var resourceUrl = originUrl + "/ej2-pdfviewer-lib";
}

<div>
    <ejs-pdfviewer id="pdfviewer" style="height:600px" documentPath=@document resourceUrl=@resourceUrl>
    </ejs-pdfviewer>
</div>

For a complete example, view the GitHub sample for loading PDF Viewer with local resources.

Step 8: Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® ASP.NET Core PDF Viewer will render in the default web browser with client-side rendering enabled.

ASP.NET Core PDF Viewer Control

NOTE

View ASP.NET Core standalone PDF Viewer sample on GitHub

See also