Section:

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#

1var provider = new FileExtensionContentTypeProvider();
2// Add new MIME type mappings
3provider.Mappings[".res"] = "application/octet-stream";
4provider.Mappings[".pexe"] = "application/x-pnacl";
5provider.Mappings[".nmf"] = "application/octet-stream";
6provider.Mappings[".mem"] = "application/octet-stream";
7provider.Mappings[".wasm"] = "application/wasm";
8
9app.UseStaticFiles();
10
11app.UseStaticFiles(new StaticFileOptions
12{
13    FileProvider = new PhysicalFileProvider(
14        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
15        ContentTypeProvider = provider
16});

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:

1docViewer.addEventListener('documentLoaded', async () => {
2    const doc = docViewer.getDocument();
3    const blobbuffer = await doc.getFileData();
4    const base64 = this.arrayBufferToBase64(blobbuffer);
5    await DotNet.invokeMethodAsync('BlazorWebViewerServer', 'modifyPDFServer', base64);
6});
7
8function arrayBufferToBase64 (buffer) {
9    let binary = '';
10    const bytes = new Uint8Array(buffer);
11    const len = bytes.byteLength;
12    for (let i = 0; i < len; i++) {
13        binary += String.fromCharCode(bytes[i]);
14    }
15    return window.btoa(binary);
16}

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#

1[JSInvokable]
2public static string modifyPDFServer(string base64string)
3{
4    // first convert the base64 string into a PDFDoc
5    var byteArrayDoc = System.Convert.FromBase64String(base64string);
6
7    PDFDoc doc = new PDFDoc(byteArrayDoc, byteArrayDoc.Length);
8    doc.InitSecurityHandler();
9
10    // perform document operations
11
12    // now convert the pdfdoc back into a base64 string
13    MemoryStream newStream = new MemoryStream();
14    doc.Save(newStream, SDFDoc.SaveOptions.e_linearized);
15    var newdocstring = System.Convert.ToBase64String(newStream.ToArray());
16
17    return newdocstring;
18}

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

JavaScript

1instance.loadDocument(this.base64toBlob(newdocbase64), {filename: 'updatedDocument.pdf'});
2
3function base64toBlob (base64) {
4    const binaryString = window.atob(base64);
5    const len = binaryString.length;
6    const bytes = new Uint8Array(len);
7    for (let i = 0; i < len; ++i) {
8        bytes[i] = binaryString.charCodeAt(i);
9    }
10
11    return new Blob([bytes], { type: 'application/pdf' });
12}

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#

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales