Some test text!

menu
search
Blazorkeyboard_arrow_down

Get started with WebViewer & Blazor

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

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.

linkPrerequisites

linkInitial setup

  1. Clone the Blazor sample by executing

    git clone https://github.com/PDFTron/webviewer-blazor-sample.git
  2. Once cloned, navigate into the webviewer-blazor-sample directory.

You are now ready to run the sample or use more WebViewer APIs.

linkSample overview

After initial setup, the webviewer-blazor-sample directory should look something like this:

webviewer-blazor-sample
├───App.razor
├───BlazorWebViewerServer.csproj
├───Program.cs
├───Startup.cs
├───bin
│   └───...
├───Data
│   └───...
├───obj
|   └───...
├───Pages
│   ├───Counter.razor
│   ├───Error.razor
│   ├───FetchData.razor
│   ├───Index.razor
│   ├───WebViewer.razor
│   ├───_Host.cshtml
|   └───_Imports.razor
│
├───Properties
│   └───launchSettings.json
│
├───Shared
│   ├───MainLayout.razor
│   └───NavMenu.razor
└───wwwroot
|   ├───webviewer-demo.pdf
|   ├───css
|   │   ├───site.css
|   |   └───...
|   ├───js
|   │   └─── webviewerScripts.js
|   ├───WebViewer
|   |   └───...
|   └───...
└───...

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.

linkRun the sample

To run the sample, navigate to your webviewer-blazor-sample/ directory and execute

dotnet run

Then navigate to https://localhost:5001. You should see the application load on your browser.

sample

linkUse 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

linkNext step

GuidesSamplesAPI docs

linkTroubleshooting

Server-side document operations with .NET Core SDK

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close