Add PDF functionality with Laravel

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 application.

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).

Test without installing
Jump to example

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.

  1. Add the following script tag in your Blade template — for example, resources/views/welcome.blade.php:

    resources/views/welcome.blade.php
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Laravel App</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.10.0/nutrient-viewer.js"></script>
    </head>
    <body>
      <!-- Your content here -->
    </body>
    </html>

  2. You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in your Blade templates.

Rendering a PDF

  1. In resources/views/welcome.blade.php, add an empty <div> element with a defined height to where Nutrient will be mounted:

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

  2. Initialize Nutrient Web SDK 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 loaded", instance);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    </script>

  3. Run php artisan serve. You’ll see the PDF rendered in the 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.

Test without installing
View example