Getting Started with ASP.NET Core Standalone PDF Viewer control

7 Feb 20256 minutes to read

The ASP.NET Core PDF Viewer control is used to viewing and printing PDF files in any web application. It provides the best viewing experience available with core interactions such as zooming, scrolling, text searching, text selection, and text copying. Thumbnail, bookmark, hyperlink and table of contents support provides easy navigation within and outside the PDF files.

This section briefly explains about how to integrate ASP.NET Core PDF Viewer control in your ASP.NET Core application using Visual Studio.

Prerequisites

System requirements for ASP.NET Core controls

Integrate PDF Viewer into an ASP.NET Core application

  1. Start Visual Studio and select Create a new project.
  2. In the Create a new project dialog, select ASP.NET Core Web App.
    select-aspnet-core-web-app
  3. In the Configure your new project dialog, enter Project Name and select Next.
    Set-project-name
  4. In the Additional information dialog, select .NET 6.0 (Long-term Support) and then select Create.
    Set-framework

ASP.NET Core PDF Viewer NuGet package installation

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

Add Syncfusion® ASP.NET Core Tag Helper

Open ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.

@addTagHelper *, Syncfusion.EJ2

Add style sheet

The theme is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

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

NOTE

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls.

Add script reference

Add the required scripts using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

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

Steps to Load PDF Viewer with Local script and style

To use local resources with your PDF Viewer, follow these steps:

Step 1: Place the ej2.min.js script and its related styles in wwwroot folder of your ASP.NET Core application.

Step 2: Insert the necessary script and style references within the <head> section of your _Layout.cshtml file. Make sure these point to your local copies of the files instead of CDN links.

By following these steps, you will configure your PDF Viewer to load the required script and style 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

Open ~/Pages/Shared/_Layout.cshtml page and register the script manager in the ASP.NET Core application as follows.

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

NOTE

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

Add ASP.NET Core PDF Viewer control

Add the Syncfusion® ASP.NET Core PDF Viewer tag helper in ~/Pages/Index.cshtml page. You can load a PDF file in the PDF Viewer by specifying the document name in the documentPath property as below.

@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>

In the above code,

ejs-pdfviewer refers to the PDF Viewer control among the EJ components with id as “pdfviewer”.

documentPath is the property needed to load a PDF file in the PDF Viewer.

How to Configure PDF Viewer to Use Local Resources

To utilize the resourceUrl and documentPath locally with your PDF Viewer, follow these instructions:

Step 1: Ensure that your application includes the ej2-pdfviewer-lib folder. This folder must contain the pdfium.js, pdfium.wasm files, and the PDF file that you intend to display. These should reside in the same location as the ej2.min.js script and its related styles.

Step 2: Assign local file paths to the documentPath and resourceUrl properties within the PDF Viewer setup. The documentPath should refer to your PDF file, while the resourceUrl should point to the directory containing the supporting resources.

By following these steps, you will configure your PDF Viewer to load the required 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>

View the sample in GitHub to load PDF Viewer with local resources

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core PDF Viewer control will be rendered in the default web browser.

ASP.NET Core PDF Viewer Control

NOTE

View Sample in GitHub.

See also