Skip to content

SDK

Low-Code

Workflow

DWS API
Nutrient Web SDK

Add PDF functionality with Electron

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

  1. Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:

    Terminal window
    npm i @nutrient-sdk/viewer

  2. Copy the PSPDFKit for Web library assets to the public directory:

    Terminal window
    cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./public/

Render a PDF

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

  2. In the root folder of your application, add the following to the index.html file in the place where you want to add the PDF viewer:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Nutrient for Electron Example App</title>
    

        <style>
          html,
          body {
            margin: 0;
            padding: 0;
            background: #f6f7fa;
          }
    

          header {
            display: none;
          }
    

          #root {
            width: 100vw;
            height: 100vh;
          }
    

        </style>
      </head>
    

      <body>
        <header></header>
        <div id="root"></div>
    

        <script src="./public/nutrient-viewer.js"></script>
    

        <script type="module">
    

          let instance = null;
    

    

          async function load(document) {
            if (instance) {
              NutrientViewer.unload(instance);
              hasUnsavedAnnotations = false;
              instance = null;
            }
    

            const configuration = {
              document,
              container: "#root",
              appName: "nutrient-electron-example",
              // Add when using a license key
              // licenseKey: "LICENSE KEY GOES HERE",
            };
    

            instance = await NutrientViewer.load(configuration);
          }
    

          window.onload = () => load("./public/document.pdf");
        </script>
      </body>
    </html>

  3. Make sure you’ve enabled the file protocol in your main process:

    // Make sure to enable access to the local file system. This is required
    // to load PDF files and PSPDFKit dependencies from the local file system.
    electron.protocol.registerSchemesAsPrivileged([
      {
        scheme: "file",
        privileges: { secure: true, standard: true },
      },
    ]);

  4. Start the development server:

    Terminal window
    npm run start

  5. You should see the PDF rendered in the UI.

Troubleshooting

Example View the example repo on GitHub.
Facing issues? Visit the troubleshooting guide for solutions to some common errors.