PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

Get Started

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

Blazor project PDF.js Express Viewer integration issues

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

MIME type issues

If WebViewer is telling you there are MIME types not available or if your server cannot find .res files, you may have to enable MIME type mappings based on the mappings defined here for specific document types.

ASP.NET Server

If you are using an ASP.NET server, which is the default server Blazor uses, this guide shows how to add MIME type mappings.

For example, if you are getting MIME issues while pdf files, then add these lines inside the public void Configure(IApplicationBuilder app, IWebHostEnvironment env) method in Startup.cs of your project:

var provider = new FileExtensionContentTypeProvider();
// Add new MIME type mappings
provider.Mappings[".res"] = "application/octet-stream";
provider.Mappings[".pexe"] = "application/x-pnacl";
provider.Mappings[".nmf"] = "application/octet-stream";
provider.Mappings[".mem"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
        ContentTypeProvider = provider
});

Please note you need to use the Microsoft.AspNetCore.StaticFiles, Microsoft.Extensions.FileProviders and System.IO namespaces in your Startup.cs file.

Passing WebViewer elements to .NET Core

If you want to use our .NET Core package to handle document operations, you can pass the PDFDoc loaded into WebViewer through the JavaScript interop by passing its base64 data.

Here's how to convert the loaded document data into a base64 string on the WebViewer side:

docViewer.on('documentLoaded', async () => {
    const doc = docViewer.getDocument();
    const blobbuffer = await doc.getFileData();
    const base64 = this.arrayBufferToBase64(blobbuffer);
    await DotNet.invokeMethodAsync('BlazorWebViewerServer', 'modifyPDFServer', base64);
});

function arrayBufferToBase64 (buffer) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

On the .NET Core side, you can reconstruct the PDFDoc with the base64 string, perform document operations using our .NET Core SDK, and convert the new document back to base64:

[JSInvokable]
public static string modifyPDFServer(string base64string)
{
    // first convert the base64 string into a PDFDoc
    var byteArrayDoc = System.Convert.FromBase64String(base64string);

    PDFDoc doc = new PDFDoc(byteArrayDoc, byteArrayDoc.Length);
    doc.InitSecurityHandler();

    // perform document operations

    // now convert the pdfdoc back into a base64 string
    MemoryStream newStream = new MemoryStream();
    doc.Save(newStream, SDFDoc.SaveOptions.e_linearized);
    var newdocstring = System.Convert.ToBase64String(newStream.ToArray());

    return newdocstring;
}

Then back on the WebViewer side, you can reload the updated document from the base64 string like so:

instance.loadDocument(this.base64toBlob(newdocbase64), {filename: 'updatedDocument.pdf'});

function base64toBlob (base64) {
    const binaryString = window.atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; ++i) {
        bytes[i] = binaryString.charCodeAt(i);
    }

    return new Blob([bytes], { type: 'application/pdf' });
}

Increasing file transfer size limit for JavaScript interop

If you are using the ASP.NET server, you may have to increase the interop byte transfer limit to transfer documents. This can be done in the ConfigureServices function in Startup.cs:

services.AddServerSideBlazor().AddHubOptions(o =>
{
    o.MaximumReceiveMessageSize = 102400000; // new limit
});