Add PDF functionality with Blazor

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you'll be able to render a PDF document in the UI.

Test without installing You can test the SDK capabilities in our playground.

Jump to example Prefer to jump straight to code? View the example repo on GitHub.

Installation

Nutrient Viewer library files are distributed as an archive that you extract manually:

1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-1.0.0.tar.gz to your computer.

2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot directory in your project.

3. Make sure your wwwroot folder contains the file nutrient-viewer.js and a nutrient-viewer-lib directory with library assets.

Render a PDF

These steps cover both Server and WebAssembly.

1. Rename the PDF document you want to display in your application to document.pdf, and place it in the wwwroot directory. You can use this demo document as an example.

2. To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:

   @inherits LayoutComponentBase
   @Body

3. Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:

   @page "/"
   @inject IJSRuntime JS
   
   <div id='container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>
   
   @code {
   
       protected override async void OnAfterRender(bool firstRender)
       {
         if (firstRender) {
           await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
         }
       }
   }

4. Load Nutrient Viewer into Pages/_Host.cshtml before the </body> tag:

   @* Include nutrient-viewer.js in your Pages/_Host.cshtml file *@
   <script src="dist/nutrient-viewer.js"></script>
   
   @* Initialize Nutrient Viewer in Blazor Server by calling NutrientViewer.load(): *@
   <script>
     function loadPDF(container, document) {
         NutrientViewer.load({
           container: container,
           document: document
         })
     }
   </script>

5. Server only: make sure to add the MIME type mappings to allow conversion of Office files:

   1. Go to Program.cs.
   2. Import using Microsoft.AspNetCore.StaticFiles;.
   3. Add the following code to your app builder:

      FileExtensionContentTypeProvider extensionProvider = new();
      extensionProvider.Mappings.Add(".dll", "application/octet-stream");
      extensionProvider.Mappings.Add(".dat", "application/octet-stream");
      extensionProvider.Mappings.Add(".blat", "application/octet-stream");
      
      app.UseStaticFiles(new StaticFileOptions
      {
      ContentTypeProvider = extensionProvider
      });

6. Run the app.

   Server: start the app in the root directory of your project:

   sh dotnet watch run

   WebAssembly: select Run > Start Debugging. This will start your app and open it in your default browser.

Troubleshooting

Example View the example repo on GitHub.

Facing issues? Visit the troubleshooting guide for solutions to some common errors.