Integrating new Blazor project with WebViewer JavaScript PDF library

This guide will help you integrate a free trial of WebViewer into Blazor applications from scratch. It will help you clone the Blazor sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

Server sample

Get the Blazor server sample source code here

Client (WebAssembly) sample

Get the Blazor wasm sample source code here

• .NET Core SDK 3
• Node.js and npm

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. Once cloned, 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 the Apryse WebViewer and extract it to /wwwroot/lib.

You are now ready to run the sample or use more WebViewer APIs.

After initial setup, the webviewer-blazor-sample or webviewer-blazor-wasm-sample directory should look something 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
|   |   └───...
|   └───...
└───...

Notable files and directories include:

In short, webviewerScripts.js contains the JavaScript code for instantiating and interacting with WebViewer. WebViewer.razor then calls those functions via JavaScript interop.

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.

To call more WebViewer API's, navigate to /wwwroot/js/webviewerScripts.js and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided).

initWebViewer: function () {
    const viewerElement = document.getElementById('viewer');
    WebViewer({
        path: 'WebViewer/lib',
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
    }, viewerElement).then(instance  => {
        // call apis here
    })
}

For example, you can add instance.setTheme('dark') to change the WebViewer UI theme to dark. If you stop the server, and execute dotnet run again, then reload the page, you should see the theme change:

Usage Guides Samples API docs

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.