ASP.NET or Blazor Integration Issues

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 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:

C#

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:

JavaScript (SDK v8.0+)

docViewer.addEventListener('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);
}

JavaScript (SDK v6.0+)

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:

C#

[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:

JavaScript

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:

C#

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