Syncfusion AI Assistant

How can I help you?

Getting Started with Standalone ASP.NET Core PDF Viewer

27 Apr 20265 minutes to read

This article shows how to add the Syncfusion® Standalone ASP.NET Core PDF Viewer to a ASP.NET Core Web application using Visual Studio or Visual Studio Code. A fully functional example project is available in the GitHub repository.

Prerequisites

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

Create an ASP.NET Core Web App using Visual Studio 2022 by 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.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install the Syncfusion.EJ2.AspNet.Core NuGet package.
dotnet add package Syncfusion.EJ2.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

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

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/33.2.3/dist/ej2.min.js"></script>
</head>

To use locally available script and style resources, follow these instructions

Register Syncfusion® 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 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> element.

Add ASP.NET Core PDF Viewer control

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

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

<div class="text-center">
    <!-- documentPath specifies the PDF document to load -->
    <ejs-pdfviewer id="pdfviewer" style="height:600px" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

To use the resourceUrl and documentPath locally with the PDF Viewer, follow these instructions.

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

See also