Section:

Integrate WebViewer JavaScript PDF Viewer & Editor into a Blazor App

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Blazor application.

You can also download a ready-to-go sample on GitHub for Blazor server sample or for Blazor wasm sample.

Prerequisites

Prior to starting, you should have already installed Node and npm.

In addition,

  • If you do not yet have a Blazor app, follow the Blazor tutorial to create your app
  • 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.

Quick start video

This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.

1. Install WebViewer and copy assets

This guide assumes you already have a Blazor project set up. If you do not, please follow the Blazor quick start guide to get your project scaffolded.

We will use NPM to install WebViewer. If you do not yet have a package.json file, we can create one by running:

sh

1npm init

You can use whatever values you want when asked.

Once we have a package.json file, we can install WebViewer by running:

sh

1npm install @pdftron/webviewer

We're also going to need to copy the WebViewer assets into the wwwroot folder so that they can be loaded statically. In package.json, add the following scripts.

JSON

package.json

1{
2  "scripts": {
3    "copy-webviewer": "mkdir -p ./wwwroot/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/* ./wwwroot/lib/webviewer",
4    "postinstall": "npm run copy-webviewer"
5  }
6}

2. Load WebViewer

In our main application file (App.razor if you followed the Blazor get started tutorial), load the WebViewer library by adding the following script tag somewhere in the <head>.

HTML

1 <script src="@Assets["lib/webviewer/webviewer.min.js"]"></script>

3. Instantiate WebViewer

Create a new file called WebViewer.razor in the Components folder and add the following code.

HTML

Components/WebViewer.razor

1<div id='viewer' style='width: 100%; height: 100%; margin: 0 auto;'></div>
2
3<script>
4  window.WebViewer({
5    path: '/lib/webviewer/public',
6    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
7    licenseKey: 'YOUR_LICENSE_KEY',
8  }, document.getElementById('viewer')).then((instance) => {
9
10  })
11</script>

We can now use this component elsewhere in our app by simply using <WebViewer />

For example, in Components/Pages/Home.razor , we could load WebViewer by replacing the code in the file with:

HTML

Components/Pages/Home.razor

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

You should now be able to run your app and see WebViewer mounted on the page.

4. Set MIME types

This step is optional, but recommended

WebViewer contains numerous different file types (WASM, GZ, BR) that the server needs to know how to handle. In order to tell Blazor how to serve these assets properly, we need to configure the MIME types.

In Program.cs, add the following code to apply the proper MIME types.

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";
7
8app.UseStaticFiles(new StaticFileOptions
9{
10    FileProvider = new PhysicalFileProvider(
11        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
12        ContentTypeProvider = provider
13});
14

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