Integrating new Blazor project with WebViewer JavaScript PDF library

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.

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

• .NET Core SDK 3
• WebViewer will work for 7 days without any feature limitations. To extend your trial, sign-up to get your trial key.

Clone the Blazor server sample by executing

git clone https://github.com/PDFTron/webviewer-blazor-sample.git

or Blazor wasm sample

git clone https://github.com/PDFTron/webviewer-blazor-wasm-sample.git

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.

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',
        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'
    }, 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.