Integrate WebViewer into Blazor

This sample shows how to integrate the Apryse WebViewer into a Blazor project using the Blazor server-side application template.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

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

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}
15

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Integrate WebViewer into Blazor