Integrate WebViewer JavaScript PDF Viewer & Editor into a Blazor App

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

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

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

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

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

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

1@page "/webviewer"
2@inject IJSRuntime JSRuntime
3
4<h1>WebViewer</h1>
5<div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
6
7@code {
8  protected override async void OnAfterRender(bool firstRender)
9  {
10    if (firstRender) {
11+ await JSRuntime.InvokeAsync<object>("webviewerFunctions.initWebViewer");
12    }
13  }
14}

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

1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Threading.Tasks;
5using Microsoft.AspNetCore.Builder;
6using Microsoft.AspNetCore.Components;
7using Microsoft.AspNetCore.Hosting;
8using Microsoft.AspNetCore.HttpsPolicy;
9using Microsoft.Extensions.Configuration;
10using Microsoft.Extensions.DependencyInjection;
11using Microsoft.Extensions.Hosting;
12using BlazorWebViewerServer.Data;
13+using System.IO;
14+using Microsoft.AspNetCore.StaticFiles;
15+using Microsoft.Extensions.FileProviders;
16
17namespace BlazorWebViewerServer
18{
19    public class Startup
20    {
21        public Startup(IConfiguration configuration)
22        {
23            Configuration = configuration;
24        }
25
26        public IConfiguration Configuration { get; }
27
28        // This method gets called by the runtime. Use this method to add services to the container.
29        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
30        public void ConfigureServices(IServiceCollection services)
31        {
32            services.AddRazorPages();
33            services.AddServerSideBlazor();
34            services.AddSingleton<WeatherForecastService>();
35        }
36
37        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
38        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
39        {
40            if (env.IsDevelopment())
41            {
42                app.UseDeveloperExceptionPage();
43            }
44            else
45            {
46                app.UseExceptionHandler("/Error");
47                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
48                app.UseHsts();
49            }
50
51+ var provider = new FileExtensionContentTypeProvider();
52+ provider.Mappings[".res"] = "application/octet-stream";
53+ provider.Mappings[".pexe"] = "application/x-pnacl";
54+ provider.Mappings[".nmf"] = "application/octet-stream";
55+ provider.Mappings[".mem"] = "application/octet-stream";
56+ provider.Mappings[".wasm"] = "application/wasm";
57+ app.UseStaticFiles(new StaticFileOptions
58+ {
59+ FileProvider = new PhysicalFileProvider(
60+ Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
61+ ContentTypeProvider = provider
62+ });
63
64            app.UseHttpsRedirection();
65            app.UseStaticFiles();
66
67            app.UseRouting();
68
69            app.UseEndpoints(endpoints =>
70            {
71                endpoints.MapBlazorHub();
72                endpoints.MapFallbackToPage("/_Host");
73            });
74        }
75    }
76}

1dotnet run