Syncfusion AI Assistant

How can I help you?

Getting Started with Standalone ASP.NET Core PDF Viewer

21 May 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 and script reference

Reference the Syncfusion theme and JavaScript library using the CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml. The stylesheet provides styling for all Syncfusion components including the PDF Viewer, and the script provides the client-side functionality.

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

NOTE

To learn other ways to load themes or scripts (such as NPM packages or CRG), see the Themes topic and Adding Script Reference documentation.

Register Syncfusion® Script Manager

Open the ~/Pages/Shared/_Layout.cshtml page and register the script manager. 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.

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

NOTE

The documentPath property specifies the PDF document to load in the viewer. To use the resourceUrl and documentPath with locally available PDF documents and resources, follow these instructions.

Run the application

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

View sample in GitHub

Video tutorial

To get started quickly with the ASP.NET Core PDF Viewer, you can watch this video:

See also