Some test text!

Web

Downloads

FAQ

API

Samples

Changelog

Demo

Guides

Web / Guides

Integrate WebViewer JavaScript PDF Viewer & Editor into a Blazor App

New project

Existing project

Integrating existing Blazor project with WebViewer JavaScript PDF library

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

If you are using the client-side model of Blazor, please make sure the server hosting the static files includes the MIME type mappings outlined here .

Prerequisites

An existing Blazor application
.NET Core SDK 3
WebViewer
Get your Apryse trial 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.

Integrate into your application

1. Setup

Navigate to your Blazor project. Let's call the path to your project PROJ_ROOT:

PROJ_ROOT = path/to/your/blazor/project/

From the WebViewer.zip file you downloaded, copy the lib folder into the static folder of your application, which is usually wwwroot.

2. Integrate WebViewer

First to ensure Blazor can use the WebViewer library and APIs, open the main HTML file of your project(should be either PROJ_ROOT/wwwroot/index.html or PROJ_ROOT/Pages/_Host.cshtml). Add the WebViewer library as a script tag in the <head> element of that file:

<script src="lib/webviewer.min.js"></script>

Next to call WebViewer APIs, we need to wrap them in a JavaScript object. Make a js folder in your static directory if it does not exist already, and make a new file in it called webviewerScripts.js. Add your own license key in place of 'YOUR_LICENSE_KEY'.

Inside that file, we define a new object called webviewerFunctions and expose that to window:

window.webviewerFunctions = {
  initWebViewer: function () {
    const viewerElement = document.getElementById('viewer');
    WebViewer({
      path: 'lib',
      licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf', // replace with your own PDF file
    }, viewerElement).then(instance => {
      // call apis here
    })
  }
};

Then to make sure Blazor can find this file, again add a script tag to the main html file of your project, but this time inside the <body> element:

<script src="js/webviewerScripts.js"></script>

Now that we have wrapped the WebViewer JavaScript instantiation function, we need to define the actual page for WebViewer to run in. Make a new page under PROJ_ROOT/Pages and call it WebViewer.razor.

Inside this page make a div element called viewer for the instantiation to attach to:

<h1>WebViewer</h1>
<div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>

Then override the OnAfterRender() method of the page and invoke the initWebViewer function we defined earlier:

await JSRuntime.InvokeAsync<object>("webviewerFunctions.initWebViewer");

Your final WebViewer.razor file should look something like this:

@page "/webviewer"
@inject IJSRuntime JSRuntime

<h1>WebViewer</h1>
<div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>

@code {
  protected override async void OnAfterRender(bool firstRender)
  {
    if (firstRender) {
+          await JSRuntime.InvokeAsync<object>("webviewerFunctions.initWebViewer");
    }
  }
}

Add the required WebViewer MIME type formats by adding a provider to startup.cs:

using System.IO;
using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.FileProviders;

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".res"] = "application/octet-stream";
provider.Mappings[".pexe"] = "application/x-pnacl";
provider.Mappings[".nmf"] = "application/octet-stream";
provider.Mappings[".mem"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
        ContentTypeProvider = provider
});

Your final startup.cs should look something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using BlazorWebViewerServer.Data;
+using System.IO;
+using Microsoft.AspNetCore.StaticFiles;
+using Microsoft.Extensions.FileProviders;

namespace BlazorWebViewerServer
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

+            var provider = new FileExtensionContentTypeProvider();
+            provider.Mappings[".res"] = "application/octet-stream";
+            provider.Mappings[".pexe"] = "application/x-pnacl";
+            provider.Mappings[".nmf"] = "application/octet-stream";
+            provider.Mappings[".mem"] = "application/octet-stream";
+            provider.Mappings[".wasm"] = "application/wasm";
+            app.UseStaticFiles(new StaticFileOptions
+            {
+                FileProvider = new PhysicalFileProvider(
+                    Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
+                    ContentTypeProvider = provider
+            });

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}

You can test that the WebViewer is now part of your application by running the following:

dotnet run

In your browser, go to https://localhost:5001/webviewer to see the WebViewer in action.

WebViewer integrated in Blazor sample

Next step

Usage Guides Samples API docs

Troubleshooting

MIME issues
Enable MIME type mappings for WebViewer to load documents.

Server-side document operations with .NET Core SDK
Handle document operations through the JavaScript interop by passing its base64 data.

Get the answers you need: Chat with us

Did you find this guide helpful?

Yes