Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

PDF.js Express Plus

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Integrating PDF.js Express Viewer into a new Blazor project

This guide will help you integrate PDF.js Express Viewer into Blazor applications from scratch. You can find an existing project guide here. It will help you clone the Blazor sample repository, walk through the project structure, and show you how to call other WebViewer API.

Get the Blazor sample source code here

Prerequisites

Node.js is not required for PDF.js Express Viewer
PDF.js Express Viewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
Free license key required.

To use PDF.js Express Viewer you do need a free license key. Please get your free Viewer key here if you do not have one.

Initial setup

  1. Clone the Blazor sample by executing

    git clone https://github.com/pdfjs-express/pdfjs-express-viewer-blazor-sample.git
    
  2. Once cloned, navigate into the pdfjs-express-viewer-blazor-sample directory and install all the required dependencies by executing

    npm install
    

    npm will also download the PDF.js Express 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 pdfjs-express-viewer-blazor-sample directory should look something like this:

pdfjs-express-viewer-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 PDF.js Express 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 pdfjs-express-viewer-blazor-sample/ directory and execute

npm start

Then navigate to https://localhost:5001/webviewer. 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: () => {
    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

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