Add PDF functionality with jQuery

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, installing using npm and integrating as a module. By the end, you’ll be able to render a PDF document in the user interface (UI).

Test without installing

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/pspdfkit-web@1.9.1/nutrient-viewer.js"></script>
      </head>
      <body>
      </body>
    </html>

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

  3. Make sure your server has the Content-Type: application/wasm MIME type set. Read more about this in the troubleshooting section of our guides.

Rendering 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 as an example.

  2. In the index.html file in the root folder of your application, add an empty <div> element with a defined width and height to where Nutrient 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 index.js into your HTML page:

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

  5. You’ll see the PDF rendered in the browser when you serve the site locally:

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

Troubleshooting

Facing issues?