Skip to content

Add PDF functionality with PHP

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:

  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 assets directory in your project.

  3. Make sure your assets 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

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

  2. 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. Include nutrient-viewer.js in your PHP page:

    <script src="assets/nutrient-viewer.js"></script>
  4. 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>
  5. Serve your site:

    Terminal window
    php -S 127.0.0.1:8000
  6. Navigate to http://127.0.0.1:8000 to view the website.

Troubleshooting