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 user interface (UI).

Test without installing
Jump to example

Installation

You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option.

  1. Add the following script tag in your Components/App.razor file before the </body> tag:

    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.9.1/nutrient-viewer.js"></script>

  2. You’re now ready to use Nutrient Web SDK and reference NutrientViewer in your Blazor components.

Rendering a PDF

These steps cover both server and WebAssembly.

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

    @inherits LayoutComponentBase
    @Body

  2. Go to the Home route located under the Components/Pages folder, and replace the contents of the file with the following:

    @page "/"
    @rendermode InteractiveServer
    @inject IJSRuntime JS
    

    <div id='nutrient-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", "#nutrient-container", "https://www.nutrient.io/downloads/nutrient-web-demo.pdf");
          }
        }
    }

  3. Initialize Nutrient Viewer in Components/App.razor before the </body> tag:

    @* Initialize Nutrient Viewer in Blazor by calling NutrientViewer.load(): *@
    <script>
      function loadPDF(container, document) {
          NutrientViewer.load({
            container: container,
            document: document
          })
      }
    </script>

  4. 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
      });

  5. To run the app, select Run > Start Debugging. This will start your app and open it in your default browser.

Troubleshooting

If you encounter issues, refer to the common issues guide.

Note for developers using AI coding assistants: To get accurate troubleshooting help, copy the content from the troubleshooting guide and include it in your prompt, along with your specific error.

Test without installing
View example