Some test text!

Search
Hamburger Icon

Web / Guides / Blazor

Integrate WebViewer JavaScript PDF Viewer & Editor into a Blazor App

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.

Prerequisites

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

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.

Get Started with the Sample

1. Initial setup

Clone the Blazor server sample by executing

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

or Blazor wasm sample

git clone https://github.com/ApryseSDK/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.

2. Run the sample

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.

3. Use more WebViewer APIs

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). Add your own license key in place of 'YOUR_LICENSE_KEY'.

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:

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.

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales