Blazor

Integrate WebViewer into Blazor WASM

This sample shows how to integrate the Apryse WebViewer into a Blazor project using the Blazor WebAssembly 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.

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWebViewerWebAssembly</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script src="lib/webviewer.min.js" type="module"></script>
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/webviewerScripts.js"></script>
</body>

</html>

webviewerScripts.js

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

Webviewer.razor

@inject IJSRuntime JSRuntime

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

@code {
    protected override async void OnAfterRender(bool firstRender)
    {
      if (firstRender) {
        await JSRuntime.InvokeAsync<object>("webviewerFunctions.initWebViewer");
      }
    }
}

Index.razor

@page "/"

<WebViewer/>

@code{}