Pre-Purchase Insights: Everything you need to know before you buy.

How to Build a C# PDF Viewer Using Blazor + Apryse WebViewer

By Apryse | 2023 Feb 11

Sanity Image
Read time

3 min

In this guide, we cover some of the limitations of C# PDF viewers. Next, learn how you can use Blazor, a framework that allows you to use C# to build web applications, with Apryse WebViewer to create a PDF viewer free of C# viewer limitations. Find WebViewer tutorial samples and documentation at the end of this post, or jump to our WebViewer Buying Guide here.

Limits of C# PDF Viewers

Copied to clipboard

With its simplicity and object-oriented approach, C# can be a quick way to build a customized PDF reader.

However, limits of C# viewer come from a reliance on server-side PDF rendering, which results in:

  • Operational expense of servers, which increases with scaling up
  • Possible performance issues with frequent server requests, complex applications, and full page reloads
  • Security of third-party servers, which may be an issue for regulated industries or sensitive data

It may be worthwhile to consider an alternative that still lets you program in C# yet overcome these limitations by embedding a Blazor PDF viewer. We'll look at a method to do this with Apryse WebViewer, a complete client-side framework.

Using Blazor and Apryse to Build a C# PDF Viewer

Copied to clipboard

Blazor is a new client-side UI framework from the ASP.NET team. It lets developers create web apps using C# and HTML while benefiting from .NET performance, reliability, and security, as well as its ecosystem of libraries.

Apryse WebViewer supports .NET (Windows), .NET Core (Windows and Linux), and Blazor, and it provides a reliable way to view and interact with PDFs. Its deep feature set lets users create PDFs, add annotations and collaborate on documents, insert bookmarks and digital signatures, and more. It’s straightforward to integrate an existing PDF library into Blazor.

Follow this tutorial to embed our WebViewer API in a new Blazor project:

Integrating WebViewer JavaScript PDF Library and Blazor

This guide will help you integrate a free trial of Apryse WebViewer into a Blazor application. You’ll clone the Blazor sample repository, walk through the project structure, and call other WebViewer APIs.


Initial Setup

1. Clone the Blazor server sample or Blazor wasm sample by executing:


# blazor server sample

git clone

# blazor wasm sample

git clone

2. Navigate into the webviewer-blazor-sample or webviewer-blazor-wasm-sample directory and install all the required dependencies by executing:

npm install

npm will also download Apryse WebViewer and extract it to /wwwroot/lib.

You are now ready to run the sample or use more WebViewer APIs.

Sample overview

After initial setup, the webviewer-blazor-sample or webviewer-blazor-wasm-sample directory should look like this:

│   └───...
│   ├───Counter.razor
│   ├───Error.razor
│   ├───FetchData.razor
│   ├───Index.razor
│   ├───WebViewer.razor
│   └───_Host.cshtml
│   └───launchSettings.json
│   ├───MainLayout.razor
│   └───NavMenu.razor
|   ├───webviewer-demo.pdf
|   ├───css
|   │   ├───site.css
|   |   └───...
|   ├───js
|   │   └─── webviewerScripts.js
|   ├───lib
|   |   └───...
|   └───...

File/folder name

  • wwwroot — Contains all the static files and WebViewer library
  • Shared — Contains the main layout for all the pages
  • Pages — Contains the HTML and C# code for all the pages
  • Startup.cs — Contains the configuration for the ASP.NET server
  • _Host.cshtml — Contains the main HTML layout for the application

In short, webviewerScripts.js contains the JavaScript code for instantiating and interacting with WebViewer. WebViewer.razor then calls those functions via JavaScript interop.

Run the sample

To run the sample, navigate to your webviewer-blazor-sample/ or webviewer-blazor-wasm-sample directory and execute:

npm start

Then navigate to https://localhost:5001/webviewer or http://localhost:5000/. You should see the application load on your browser.

Final screenshot of webviewer using blazor

Final screenshot of WebViewer embedded via Blazor and C#


Copied to clipboard

C# is a powerful language with a wide range of uses, but its server-side structure may bring limitations to your PDF viewer. If you need a PDF viewer for complex and high-volume requirements, you can easily integrate Apryse WebViewer in your Blazor project, allowing client-side performance, loading, and security along with a rich feature set.

Learn more about Apryse WebViewer or try our free demo.

Sanity Image


Share this post