Section:

Build a Blazor PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Blazor PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into a Blazor application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download ready-to-go GitHub samples for Blazor server and Blazor wasm to get started quickly. Additionally, explore the interactive Showcase demo to see WebViewer's full capabilities in action.

Prerequisites

This guide assumes basic familiarity with Blazor development. Before you start:

  • Install Node.js and npm. We recommend using the latest active LTS release.
  • Install the .NET 9+ SDK for your platform to build and run your application using C#.
  • Install Visual Studio Code or another code editor to develop and debug your code.
  • Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

1. Create a Blazor project

In this section, you’ll create a new Blazor application using the .NET CLI. This project provides the foundation for integrating Apryse WebViewer. If you already have a Blazor app, skip this and continue to Install WebViewer.

  1. Before creating a project, open your terminal and confirm the .NET CLI is installed:

Shell

1dotnet --version

If this prints a version number, you're ready to proceed. If not, install the .NET SDK and rerun the command.

2. In your terminal, go to the directory where you want to create the project.

3. Create a new webviewer-blazor project:

Shell

1dotnet new blazor -o webviewer-blazor

4. Navigate to your new Blazor project directory, initialize your project, and generate a package.json file:

Shell

1cd webviewer-blazor
2npm init -y

Info

Flags are used to skip prompts during project configuration. The setup creates a package.json file with all default values. Select different options if preferred.

The final package.json should look like this:

JSON

1{
2  "name": "webviewer-blazor",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "type": "commonjs"
13}

2. Install WebViewer

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your Blazor application.

After navigating to your webviewer-blazor project directory, run the following command to install WebViewer:

Shell

1npm i @pdftron/webviewer

3. Copy WebViewer assets

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a Blazor project, you must copy these assets into the public directory so they can be served correctly. For more, see Copying WebViewer static assets.

  1. In your terminal, create the wwwroot/lib/webviewer/public directory if it doesn't already exist:

Shell

1npx --yes shx mkdir -p wwwroot/lib/webviewer/public

2. Copy all WebViewer static assets from node_modules/@pdftron/webviewer/public into the new wwwroot/lib/webviewer/public directory:

Shell

1npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" wwwroot/lib/webviewer/public

3. Copy the webviewer.min.js library file from node_modules to the public directory:

Shell

1npx --yes cpy-cli node_modules/@pdftron/webviewer/webviewer.min.js wwwroot/lib/webviewer/public --flat

Your project should now include a similar structure:

Text

1webviewer-blazor/
2├── Components/
3├── node_modules/
4├── obj/
5├── Properties/
6└── wwwroot/
7    ├── lib/
8    │   ├── bootstrap/
9    │   └── webviewer/
10    │       └── public/
11    │           ├── core/
12    │           └── ui/
13    │           └── webviewer.min.js
14    ├── app.css
15    └── favicon.png
16└── ...

4. Create the PDF viewer

In this section, you’ll add WebViewer to your Blazor app by loading the WebViewer script and creating a Razor component that initializes the viewer and renders it in the UI, where it loads and displays a document.

  1. In Visual Studio Code, replace the contents of the Components/App.razor file with the following and save:

Razor

Components/App.razor

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <base href="/" />
8    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
9    <link rel="stylesheet" href="@Assets["app.css"]" />
10    <link rel="stylesheet" href="@Assets["webviewer-blazor.styles.css"]" />
11    <ImportMap />
12    <link rel="icon" type="image/png" href="favicon.png" />
13    <HeadOutlet />
14    <!-- Load the WebViewer library from the public assets folder --> 
15    <script src="@Assets["lib/webviewer/public/webviewer.min.js"]"></script>
16</head>
17
18<body>
19    <Routes />
20    <script src="_framework/blazor.web.js"></script>
21</body>
22
23</html>

2. Create a new Components/WebViewer.razor file, add the following code, and save:

Razor

Components/WebViewer.razor

1@* Container where the WebViewer UI is rendered *@
2<div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
3
4@* Initialize the Apryse WebViewer *@
5<script>
6  window.WebViewer(
7    {
8      // Add location of WebViewer static files
9      path: '/lib/webviewer/public',
10      // Add PDF to load on startup
11      initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
12      // Replace with your Apryse license key
13      licenseKey: 'YOUR_LICENSE_KEY',
14    },
15    // Get element to mount the viewer into
16    document.getElementById('viewer')
17  ).then((instance) => {
18    // Access the viewer API here if needed
19  });
20</script>

3. Replace the Components/Pages/Home.razor file with the following and save:

Razor

Components/Pages/Home.razor

1@page "/"
2
3<WebViewer />

5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your Blazor application to launch WebViewer and see the PDF in your browser.

  1. From your project directory, run the following command to start the application:

Shell

1dotnet run

A successful output looks similar to:

Shell

1Building...
2info: Microsoft.Hosting.Lifetime[14]
3      Now listening on: http://localhost:5067
4info: Microsoft.Hosting.Lifetime[0]
5      Application started. Press Ctrl+C to shut down.
6info: Microsoft.Hosting.Lifetime[0]
7      Hosting environment: Development
8info: Microsoft.Hosting.Lifetime[0]
9      Content root path: /path/to/your/project

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

Troubleshooting

WebViewer fails to load due to MIME type issues

If WebViewer doesn't load or you see a blank or partially rendered UI, the server may not be serving certain file types correctly. WebViewer includes files with .wasm, .gz, and .br extensions, which require proper MIME types that aren't always configured by default in Blazor.

To fix this, configure the application to serve these file types by updating Program.cs:

C#

Program.cs

1var provider = new FileExtensionContentTypeProvider();
2provider.Mappings[".res"] = "application/octet-stream";
3provider.Mappings[".pexe"] = "application/x-pnacl";
4provider.Mappings[".nmf"] = "application/octet-stream";
5provider.Mappings[".mem"] = "application/octet-stream";
6provider.Mappings[".wasm"] = "application/wasm";
7provider.Mappings[".gz"] = "application/gzip";
8provider.Mappings[".br"] = "application/brotli";
9
10app.UseStaticFiles(new StaticFileOptions
11{
12    FileProvider = new PhysicalFileProvider(
13        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
14        ContentTypeProvider = provider
15});
16

Restart the application after making these changes.

Get started video

In this 5-minute video, learn how to install and integrate the Apryse WebViewer SDK into a Blazor project.

Integrate the WebViewer SDK into an ASP.NET Core–hosted Blazor project.

Next steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales