Add PDF functionality with ASP.NET

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

Nutrient Viewer for Web library files are distributed as an archive that you extract manually:

1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-1.0.0.tar.gz to your computer.

2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot/lib directory in your project.

3. Make sure your wwwroot/lib folder contains the file nutrient-viewer.js and a nutrient-viewer-lib directory with 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

Integrate Nutrient Viewer in your view, Views/Home/Index.cshtml:

1. Include nutrient-viewer.js. The path is relative to the wwwroot directory:

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

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

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

3. Initialize Nutrient Viewer by calling NutrientViewer.load():

   <script>
     NutrientViewer.load({
       container: "#nutrient",
       document: "document.pdf",
     })
       .then(function(instance) {
         console.log("Nutrient Viewer loaded", instance);
       })
       .catch(function(error) {
         console.error(error.message);
       });
   </script>

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

5. Select Run > Start Debugging. This will start your app and open it in your default browser.

Troubleshooting

Example View the example repo on GitHub.

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