Getting Started with ASP.NET Core Standalone PDF Viewer control

16 Feb 20245 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/25.1.35/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/25.1.35/dist/ej2.min.js"></script>
</head>

NOTE

While referring the scripts from the downloaded resources in your application, make sure to place the ‘ej2-pdfviewer-lib’ assets in the same directory as the ‘ej2.min.js’ script.

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.

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.

Limitation over Server-Backed PDF Viewer to Standalone PDF Viewer control

When comparing a Standalone PDF Viewer to a Server-Backed PDF Viewer control, it’s crucial to understand the limitations that the Standalone PDF Viewer may have in comparison. These limitations are important to consider

PNG Image Support

The Standalone PDF Viewer does not have the capability to utilize PNG format for adding images to handwritten annotations ,custom stamp ,signature and initial form fields. It’s important to be aware that only certain image formats, such as JPEG, are compatible for these purposes.

Local File Access

  • The Standalone PDF Viewer control does not have the capability to directly access and load local physical files from a user’s device. As a result, it is not possible to use a documentPath to load a PDF file directly from a local server within the viewer.

  • The Standalone PDF Viewer allows users to export annotations and form fields from the viewer, it’s important to be aware that the viewer does not support the direct import of annotations and form fields from a locally specified file path. In other words, you can extract annotations and form fields from the viewer, but you cannot reintroduce them into the viewer from external sources by specifying a file path located on your local device.

NOTE

These limitations are temporary and are expected to be addressed in the near future.

See also