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

By Apryse | 2023 Feb 11

3 min

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.

Prerequisites

.NET CoreSDK 3

Node.js and npm

Initial Setup

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

```git

# blazor server sample

git clone https://github.com/PDFTron/webviewer-blazor-sample.git


# blazor wasm sample

git clone https://github.com/PDFTron/webviewer-blazor-wasm-sample.git

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:

webviewer-blazor-sample
├───App.razor
├───BlazorWebViewerServer.csproj
├───Program.cs
├───Startup.cs
├───Data
│   └───...
├───Pages
│   ├───Counter.razor
│   ├───Error.razor
│   ├───FetchData.razor
│   ├───Index.razor
│   ├───WebViewer.razor
│   └───_Host.cshtml
│
├───Properties
│   └───launchSettings.json
│
├───Shared
│   ├───MainLayout.razor
│   └───NavMenu.razor
└───wwwroot
|   ├───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#

Conclusion

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.