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.

Test without installing

CDN installation

  1. To use Nutrient Viewer in your PHP project, include the following in your page to load the library from the CDN:

    <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>

    This will make the NutrientViewer object available globally in your page so you can initialize the viewer later.

Render a PDF

  1. Rename the PDF document you want to display in your application to document.pdf. You can use this demo document(opens in a new tab) as an example.

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

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

  3. Add the following script to initialize the Nutrient Viewer:

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

  4. Here’s the full example of a complete index.php file you can use:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </head>
      <body>
        <div id="nutrient" style="width: 100%; height: 100vh;"></div>
    

        <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
    

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

  5. Start your PHP server:

    Terminal window
    php -S 127.0.0.1:8000

  6. Visit http://127.0.0.1:8000/index.php in your browser.

For a full walkthrough, see our PHP PDF Viewer tutorial(opens in a new tab).

Troubleshooting

Facing issues?