Add PDF functionality with JavaScript

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
Jump to example

Installation

  1. Reference the Nutrient Web SDK library from your index.html file <head> section:

    <doctype html>
    <html>
      <head>
        <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
      </head>
      <body>
      </body>
    </html>

  2. This will load the Nutrient Web SDK from the CDN, allowing you to reference NutrientViewer in your JavaScript code.

Render a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and place it in your project’s root directory. You can use this demo document(opens in a new tab) as an example.

  2. Add an empty <div> element with a defined width and height where the viewer will be mounted:

    <div id="nutrient" style="width: 100%; height: 100vh;"></div>

  3. Initialize the SDK in JavaScript by calling window.NutrientViewer.load():

    index.js
    window.NutrientViewer.load({
      container: "#nutrient",
      document: "document.pdf"
    })
    .then(instance => {
      console.log("Nutrient loaded", instance);
    })
    .catch(error => {
      console.error(error.message);
    });

  4. Import the JavaScript file into your HTML page:

    <script src="index.js"></script>

  5. You should now see the PDF rendered in the Nutrient Web SDK UI when you serve the site locally.

    <doctype html>
    <html>
      <head>
        <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
      </head>
      <body>
        <div id="nutrient" style="width: 100%; height: 100vh;"></div>
        <script src="index.js"></script>
      </body>
    </html>

Troubleshooting

Example
Facing issues?