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

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

Installation

1. Add the Nutrient dependency:

   npm

   npm i @nutrient-sdk/viewer

   pnpm

   pnpm add @nutrient-sdk/viewer

   yarn

   yarn add @nutrient-sdk/viewer

2. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

   cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

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

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

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 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 PSPDFKit will be mounted:

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

3. Import nutrient-viewer into your application, and initialize PSPDFKit for Web in jQuery by calling NutrientViewer.load():

   index.js

   import './assets/nutrient-viewer.js';
   
   // We need to inform Nutrient where to look for its library assets, i.e. the location of the `nutrient-viewer-lib` directory.
   const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
   
   NutrientViewer.load({
     baseUrl,
     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 type="module" src="index.js"></script>

5. You should see the PDF rendered in the browser when you serve the site locally.

Troubleshooting

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