Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / Blazor

Platform


PDFTron is now Apryse, learn more here.

Get started with WebViewer & Blazor

Welcome to Apryse. You can start working with WebViewer using our Blazor sample from scratch, or integrate it into an existing application.

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

Client (WebAssembly) sample

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Initial setup

  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

```
  1. 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.

Sample overview

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:

File/Folder NameDescription
wwwrootContains all the static files and WebViewer library
SharedContains the main layout for all the pages
PagesContains the html and C# code for all the pages
Startup.csContains the configuration for the ASP.NET server
_Host.cshtmlContains the main HTML layout for the application

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

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.

sample

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).

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:

sample-dark

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.

Get the answers you need: Support