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 user interface (UI).
You can test the SDK capabilities in our playground.
Prefer to jump straight to code? View the example repo on GitHub.
Installation
You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option.
Add the following script tag in your view — for example,
Views/Home/Index.cshtml:<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.10.0/nutrient-viewer.js"></script>You’re now ready to use Nutrient Web SDK and reference
window.NutrientViewerin your views.
Nutrient Viewer library files are distributed as an archive you extract manually:
- Download the framework here(opens in a new tab). The download will start immediately and will save a
.tar.gzarchive likePSPDFKit-Web-binary-1.0.0.tar.gzto your computer. - Once the download is complete, extract the archive and copy the entire contents of its
distfolder to thewwwroot/libdirectory in your project. - Make sure your
wwwroot/libfolder contains thenutrient-viewer.jsfile and anutrient-viewer-libdirectory with library assets. - Make sure your server has the
Content-Type: application/wasm MIMEtypeset. Read more about this in the troubleshooting section of our guides.
Rendering a PDF
Integrate Nutrient Viewer in your view, Views/Home/Index.cshtml:
Add an empty
<div>element with a definedwidthandheightto wherenutrient-viewerwill be mounted:<div id="nutrient-container" style="width: 100%; height: 100vh;"></div>Initialize Nutrient Viewer by calling
window.NutrientViewer.load():<script>window.NutrientViewer.load({container: "#nutrient-container",document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",}).then(function (instance) {console.log("Nutrient Viewer loaded", instance);}).catch(function (error) {console.error(error.message);});</script>To run the app, select Run > Start Debugging. This will start your app and open it in your default browser.
Integrate Nutrient Viewer in your view, Views/Home/Index.cshtml:
Include
nutrient-viewer.js. The path is relative to thewwwrootdirectory:<script src="/lib/nutrient-viewer.js"></script>Add an empty
<div>element with a definedwidthandheightto wherenutrient-viewerwill be mounted:<div id="nutrient-container" style="width: 100%; height: 100vh;"></div>Initialize Nutrient Viewer by calling
NutrientViewer.load():<script>NutrientViewer.load({container: "#nutrient-container",useCDN: true,document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",}).then(function (instance) {console.log("Nutrient Viewer loaded", instance);}).catch(function (error) {console.error(error.message);});</script>Note: Adding
useCDN: truewill load the SDK assets from the CDN ifbaseUrlisn’t provided. This flag was introduced in version 1.9.0. If your setup relies on the previous behavior of autodetecting the assets withoutbaseUrl, you can omit this flag for now, but be aware that this behavior is deprecated. In future versions, loading from CDN will become a default whenbaseUrlisn’t explicitly provided.useCDN: truehas no effect ifbaseUrlis set.To run the app, select Run > Start Debugging. This will start your app and open it in your default browser.
Troubleshooting
If you encounter issues, refer to the common issues guide.
Note for developers using AI coding assistants: To get accurate troubleshooting help, copy the content from the troubleshooting guide and include it in your prompt, along with your specific error.
You can test the SDK capabilities in our playground.
Prefer to jump straight into code? View the example repo on GitHub.