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

   npm

   npm i @nutrient-sdk/viewer

   pnpm

   pnpm add @nutrient-sdk/viewer

   yarn

   yarn add @nutrient-sdk/viewer

2. Copy the SDK assets to the assets directory:

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

3. You're now ready to use the Nutrient Web SDK locally in your NextJS app.

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. 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. Import Nutrient Web SDK into your application and initialize the SDK in JavaScript by calling NutrientViewer.load():

   index.js

   import "./assets/nutrient-viewer.js";
   
   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 the JavaScript file into your HTML page:

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

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

Troubleshooting

Example View the example repo on GitHub.

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