# Load and View PDF Files in ASP.NET Core

Learn how to load and view PDF files in an ASP.NET Core application. Get started and see more from Document Solutions today.

## Content

This tutorial shows how to use **Document Solutions for PDF (DsPdf)** and **Document Solutions PDF Viewer (DsPdfViewer)** in an ASP.NET Core (.NET 8) application. You will generate a PDF on the server with DsPdf, save it to the application’s `wwwroot` folder, and display it in the browser using the JavaScript-based DsPdfViewer.

By the end of this tutorial, you will have an ASP.NET Core application that creates a branded PDF file, serves it as a static file, and loads it into a browser-based PDF viewer. You will also learn how DsPdfViewer can support advanced client-side editing features when paired with the SupportApi.

## Prerequisites

Before you begin, make sure you have the following installed:

* Visual Studio 2022
* .NET 8 SDK
* Node.js and npm
* A trial or licensed version of Document Solutions for PDF

Once your environment is ready, you can create the ASP.NET Core project and add the required PDF generation and viewer packages.

***

## Create an ASP.NET Core Application

Open Visual Studio 2022 and create a new **ASP.NET Core Web App** project.
![Create project in VS 2022 - Load and Display PDFs in ASP.NET](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP1-20260529.44075d.png)
For this tutorial, use the Razor Pages project template and name the project `CreatePdf_DocSol`.
![Name PDF Viewer Project](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP2-20260529.638c97.png)
When prompted to select a framework, choose **.NET 8.0**.
![Select .NET 8 for the PDF Viewer ASP.NET Application](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP3-20260529.b4ec53.png)
After the project is created, Visual Studio will generate the default Razor Pages structure, including the `Pages` folder, `wwwroot` folder, and application startup files.

***

## Install the Document Solutions for PDF NuGet Package

The server-side PDF generation logic uses Document Solutions for PDF. To add DsPdf to your ASP.NET Core application, install the `Ds.Documents.Pdf` NuGet package.

In Visual Studio, open the NuGet Package Manager using either of the following options:

* Right-click the project in Solution Explorer and select **Manage NuGet Packages**
* Go to **Tools** \> **NuGet Package Manager** \> **Manage NuGet Packages for Solution**

In the NuGet Package Manager, set the package source to **NuGet Gallery**, open the **Browse** tab, search for `Ds.Documents.Pdf`, and install the package.
![Install a .NET PDF API library for ASP.NET Core Project](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP4-20260529.24a2ba.png)

After installation, the project can use DsPdf classes to create, modify, and save PDF documents from C#.

***

## Generate a PDF in ASP.NET Core

The PDF will be generated from the Razor Page model in `Index.cshtml.cs`. Because the generated PDF needs to be loaded by the browser, it should be saved to the application’s `wwwroot` folder.

To access that folder from server-side code, inject `IWebHostEnvironment` into the page model constructor. Then call a PDF generation method when the page model is created.

Open `Pages/Index.cshtml.cs` and add the following fields and constructor logic:

```auto
private readonly ILogger<IndexModel> _logger;
private readonly IWebHostEnvironment _environment;

public IndexModel(ILogger<IndexModel> logger, IWebHostEnvironment environment)
{
    _logger = logger;
    _environment = environment;
    CreatePdf();
}
```

Next, add the `CreatePdf` method. This method creates a one-page PDF, optionally draws a header image from the `Resources/Images` folder, loads a custom TrueType font from the `Resources/Fonts` folder, writes text content to the page, and saves the result as `sample.pdf` in `wwwroot`.

```auto
private void CreatePdf()
{
    try
    {
        // 1. Create DsPdf document
        var doc = new GcPdfDocument();

        // 2. Add page and get graphics
        var page = doc.Pages.Add();
        var g = page.Graphics;

        // 3. Optional header image from Resources/Images
        var imagePath = Path.Combine("Resources", "Images", "myheader.jpg");
        var rc = page.Bounds;

        float textTop;
        if (System.IO.File.Exists(imagePath))
        {
            GcImage img = GcImage.FromFile(imagePath);
            rc.Height *= 0.35f;
            g.DrawImage(img, rc, null, ImageAlign.StretchImage);
            textTop = rc.Bottom + 12;
        }
        else
        {
            textTop = 72;
        }

        // 4. Load custom font from Resources/Fonts, or fall back to Helvetica
        var fontPath = Path.Combine("Resources", "Fonts", "OpenSans-Regular.ttf");
        GcFont bodyFont;

        if (System.IO.File.Exists(fontPath))
        {
            bodyFont = GcFont.FromFile(fontPath);
        }
        else
        {
            bodyFont = StandardFonts.Helvetica;
        }

        var headingFormat = new TextFormat
        {
            Font = bodyFont,
            FontSize = 20,
            ForeColor = Color.Black
        };

        var textFormat = new TextFormat
        {
            Font = bodyFont,
            FontSize = 12,
            ForeColor = Color.Black
        };

        // 5. Build the text layout
        var tl = g.CreateTextLayout();
        tl.MaxWidth = page.Size.Width - 72 * 2;
        tl.AppendLine("Document Solutions for PDF (DsPdf)", headingFormat);
        tl.AppendLine("");
        tl.AppendLine(
            "This PDF includes a header image and a custom font loaded from Resources. " +
            "It follows the same layout style as the original marketing blog sample.",
            textFormat);
        tl.AppendLine("");
        tl.AppendLine("Features:", textFormat);
        tl.AppendLine("• Load header branding images", textFormat);
        tl.AppendLine("• Use custom TTF fonts", textFormat);
        tl.AppendLine("• Create rich PDF layouts in ASP.NET Core", textFormat);
        tl.PerformLayout(true);

        // 6. Draw the text beneath the header area
        g.DrawTextLayout(tl, new PointF(72, textTop));

        // 7. Save the document into wwwroot/sample.pdf
        Directory.CreateDirectory(_environment.WebRootPath);
        var outputPath = Path.Combine(_environment.WebRootPath, "sample.pdf");

        using var fs = new FileStream(outputPath, FileMode.Create, FileAccess.Write);
        doc.Save(fs);

        _logger.LogInformation("PDF created at {Path}", outputPath);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error creating PDF.");
    }
}
```

When the application runs, the PDF is generated on the server and saved as `wwwroot/sample.pdf`, making it available to the browser as a static file.
![ASP.NET Core Generated PDF using Server-Side PDF API Lib](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP5-20260529.28d824.png)

***

## Install the Document Solutions PDF Viewer Package

Next, install the JavaScript PDF Viewer package so the generated PDF can be displayed in the browser.

Open the Package Manager Console in Visual Studio from **Tools** \> **NuGet Package Manager** \> **Package Manager Console**, then run the following command:

```auto
npm install @mescius/dspdfviewer
```

After installation, the viewer files are available in:

```auto
node_modules/@mescius/dspdfviewer
```

Copy the `dspdfviewer` folder into the following location so it can be served by the ASP.NET Core application:

```auto
wwwroot/lib/dspdfviewer
```

This makes the viewer JavaScript and worker files available to your Razor Pages.
![Installing a JavaScript PDF Viewer | Document Solutions PDF Viewer Control](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP6-20260529.4afa52.png)

***

## Display the PDF with DsPdfViewer

Now that the PDF is generated and the viewer files are available in `wwwroot`, update `Index.cshtml` to display the PDF in the browser.

Open `Pages/Index.cshtml` and replace the default Razor markup with the following code:

```auto
@page
@model CreatePdf_DocSol.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<h2>PDF Viewer</h2>

<div id="root" style="height:600px; width:100%;"></div>

@section Scripts {
    <script src="/lib/dspdfviewer/dspdfviewer.js"></script>
    <script>
        var viewer = new DsPdfViewer("#root", {
            workerSrc: "/lib/dspdfviewer/dspdfviewer.worker.js"
        });

        viewer.addDefaultPanels();
        viewer.open("sample.pdf");
    </script>
}
```

The viewer is initialized inside the `#root` element. The **[workerSrc](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/ViewerOptions#workersrc "https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/ViewerOptions#workersrc")** option points to the viewer worker file, **[addDefaultPanels()](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer#adddefaultpanels "https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer#adddefaultpanels")** adds the standard toolbar and navigation panels, and **[open()](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer#open "https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer#open")** loads the generated `sample.pdf` file.

When you run the application, the PDF generated on the server will be displayed in DsPdfViewer.
![Displaying a PDF with a Viewer Control in JavaScript Apps](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/ASP7-20260529.40f6b9.png)

***

## Enable Client-Side PDF Editing with SupportApi

DsPdfViewer can do more than display PDFs. When paired with the Document Solutions SupportApi, it can also enable advanced client-side editing features such as annotations, form editing, signatures, redaction, page organization, and saving modified PDF files.

SupportApi is a server-side component that works with DsPdfViewer to process editing operations. It allows users to modify PDFs directly in the browser while the server handles document processing, saving, and validation.

To connect DsPdfViewer to SupportApi, configure the `supportApi` option when initializing the viewer:

```auto
var viewer = new DsPdfViewer("#root", {
    workerSrc: "/lib/dspdfviewer/dspdfviewer.worker.js",
    supportApi: {
        apiUrl: "https://localhost:5001/api/pdf-viewer",
        token: "support-api-demo-net-core-token-2021",
        webSocketUrl: false
    }
});

viewer.addDefaultPanels();
viewer.open("sample.pdf");
```

The exact `apiUrl` and token values should match your SupportApi configuration.

***

## Use the Annotation Editor

Annotations are useful for reviewing and collaborating on PDF documents. With SupportApi enabled, DsPdfViewer allows users to add, edit, and remove annotations directly in the browser.

For example, users can highlight text, add comments, draw shapes, mark corrections, or use circle annotations to call attention to specific areas of a document.
![Using a JavaScript PDF Viewers Annotation Editor](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/asp8-20260529.db88fd.gif)

This makes DsPdfViewer useful for workflows that involve document review, feedback, approval, and collaboration.

***

## Organize PDF Pages with Page Management Tools

DsPdfViewer also includes page management features when SupportApi is enabled. Users can insert pages, delete pages, duplicate pages, reorder pages, and combine document content directly in the browser.
![Allow Users to Organize PDF Documents in JavaScript PDF Developer Tool](https://cdn.mescius.io/document-site-files/images/9cff3ae8-6cf4-4362-9202-5833da8e6dd7/asp9-20260529.f7d10e.gif)

These tools are helpful when building applications that require users to restructure PDFs after they have been generated, uploaded, or reviewed.

***

## FAQ

* **Can I generate PDFs and display them in the same ASP.NET Core application?**
    Yes. DsPdf can generate PDF files on the server, and DsPdfViewer can display those files in the browser. In this tutorial, the generated file is saved to `wwwroot/sample.pdf` and loaded with `viewer.open("sample.pdf")`.
<br>
* **Why save the generated PDF to the wwwroot folder?**
    The `wwwroot` folder is ASP.NET Core’s default location for static files. Saving the generated PDF there makes it accessible to the client-side viewer through a browser-friendly URL.
<br>
* **Do I need DsPdfViewer to generate PDFs?**
    No. DsPdf is used for server-side PDF generation and manipulation. DsPdfViewer is used to view and interact with PDF files in the browser.
<br>
* **Do I need SupportApi for basic PDF viewing?**
    No. Basic PDF viewing, navigation, zooming, and searching can be handled by DsPdfViewer in the browser. SupportApi is needed for advanced editing workflows such as annotations, form editing, signatures, redaction, page organization, and saving modified PDFs.
<br>
* **Can this approach be used with other ASP.NET Core project types?**
    Yes. Although this tutorial uses Razor Pages, the same general workflow applies to MVC and Web API projects: generate or provide the PDF on the server, make it accessible through a URL, and load it in DsPdfViewer on the client.

***

## Next Steps

* [Review the full Document Solutions for PDF .NET documentation](https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/overview "https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/overview").
* [Explore Document Solutions PDF Viewer demos](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/ "https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/").
* [Learn more about the Document Solutions SupportApi and PDF Viewer editing features](https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/pdfviewer "https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/pdfviewer").