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.
Installation
Nutrient Web SDK library files are distributed as an archive that you extract manually:
Download the framework here. The download will start immediately and will save a
.tar.gz
archive likePSPDFKit-Web-binary-1.0.0.tar.gz
to your computer.Once the download is complete, extract the archive and copy the entire contents of its
dist
folder to theassets
directory in your project.Make sure your
assets
folder contains the filenutrient-viewer.js
and anutrient-viewer-lib
directory with library assets.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
Rename the PDF document you want to display in your application to
document.pdf
, and place it in theassets
directory. You can use this demo document as an example.Add an empty
<div>
element with a definedwidth
andheight
to where PSPDFKit will be mounted:<div id="nutrient" style="width: 100%; height: 100vh;"></div>Include
nutrient-viewer.js
in your PHP page:<script src="assets/nutrient-viewer.js"></script>Initialize Nutrient Viewer in PHP by calling
NutrientViewer.load()
:<script>NutrientViewer.load({container: "#nutrient",document: "document.pdf"}).then(function(instance) {console.log("Nutrient loaded", instance);}).catch(function(error) {console.error(error.message);});</script>Serve your site:
Terminal window php -S 127.0.0.1:8000Navigate to
http://127.0.0.1:8000
to view the website.