Some test text!

menu
search
Blazor project integration issueskeyboard_arrow_down

Blazor project WebViewer integration issues

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

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

linkPassing 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();
    var blobbuffer = await doc.getFileData();
    var base64 = this.arrayBufferToBase64(blobbuffer);
    await DotNet.invokeMethodAsync('BlazorWebViewerServer', 'modifyPDFServer', base64);
});

function arrayBufferToBase64 (buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var 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) {
    var binaryString = window.atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (let i = 0; i < len; ++i) {
        bytes[i] = binaryString.charCodeAt(i);
    }

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

linkIncreasing 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
});

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