How to build a Laravel PDF viewer

This post explores how to build a feature-rich Laravel PDF viewer using Nutrient.

Why choose PHP with Laravel?

PHP remains one of the most widely used programming languages for web development, powering a significant portion of websites that rely on server-side scripting. Despite a decline in its overall usage, PHP’s ecosystem continues to thrive, especially with frameworks like Laravel. Laravel, a popular PHP framework, is known for its elegant syntax, robust features, and ease of use. With built-in tools for routing, authentication, caching, and more, Laravel significantly improves development speed and efficiency.

Laravel’s relevance is demonstrated through its strong adoption in both small projects and large-scale enterprise applications. Developers can tap into its community-driven ecosystem to implement complex functionalities like PDF viewing with ease. Whether you’re building a simple blog or a high-performance web app, Laravel remains a top choice in the PHP landscape.

What is a Laravel PDF viewer?

A Laravel PDF viewer uses Laravel to render and view PDF documents in a web browser without the need to download it to your hard drive or use an external application like a PDF reader.

Nutrient Laravel PDF viewer

We offer a commercial Laravel PDF viewer library that can easily be integrated into your web application. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

• A prebuilt and polished UI for an improved user experience
• 15+ prebuilt annotation tools to enable document collaboration
• Support for more file types with client-side PDF, MS Office, and image viewing
• Dedicated support from engineers to speed up integration

Example of our Laravel PDF viewer

To demo our Laravel PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.

Requirements to get started

To get started, you’ll need:

• PHP
• Composer
• Laravel Installer

You can install PHP via XAMPP, MAMP, or Homebrew.

Don’t forget to add composer to your path directory:

export PATH="$HOME/.composer/vendor/bin:$PATH"

Creating the project

1. Create a new Laravel project:

laravel new nutrient-app

Accept default settings when prompted.

2. Change to the created project directory:

cd nutrient-app

Adding Nutrient to your project

Nutrient Web SDK files are distributed as an archive that can be extracted manually.

1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.1.tar.gz to your computer.

2. Once the download is complete, extract the archive to your computer.

3. Create a new directory under public called assets, and copy the entire contents of its dist folder to your project’s public/assets folder.

Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Integrating into your project

1. Add the PDF document you want to display to the public folder. You can use our demo document as an example.

2. Navigate to the resources/views/welcome.blade.php file.

3. Add an empty <div> element with a defined height to where Nutrient will be mounted:

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

4. Include pspdfkit.js on the welcome.blade.php file:

<script src="assets/pspdfkit.js"></script>

5. Initialize Nutrient Web SDK in Laravel by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#nutrient",
  		document: "document.pdf" // Add the path to your document here.
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</script>

You can see the full welcome.blade.php file (which is just a plain HTML file):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where Nutrient will be mounted. -->
		<div id="nutrient" style="height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>

		<script>
			PSPDFKit.load({
				container: "#nutrient",
				document: "document.pdf", // Add the path to your document here.
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>

The basic file structure of your Laravel project will look like this:

/public
   /document.pdf
   /assets
      /pspdfkit.js
  /resources
    /views
      welcome.blade.php

Serving your website

1. Go to your terminal and run a server with this command:

php artisan serve

By default, the application will be accessible at http://127.0.0.1:8000. Open this URL in your browser to view your Laravel PDF viewer in action.

2. Navigate to http://127.0.0.1:8000 to view the website.

Advanced features of Nutrient Laravel PDF viewer

Nutrient offers a range of advanced features that enhance the Laravel PDF viewer experience, making it a powerful solution for handling various document-related tasks.

Annotation tools

Nutrient provides more than 15 annotation tools that allow users to collaborate on documents effectively. These include freehand drawing, highlighting, comments, and shapes. Check out 8 common PDF annotation types to learn more about the different annotation tools available.

Form filling

With built-in form filling capabilities, users can complete interactive PDF forms within the viewer, such as text fields, checkboxes, and dropdowns. This feature is useful for applications requiring data collection and form processing.

Digital signatures

Secure your documents with digital signatures using Nutrient. This feature enables users to sign documents electronically, ensuring authenticity and integrity. Digital signatures are essential for legal and compliance purposes, providing a secure way to validate document content. Check out How to add digital signatures to PDFs using Laravel to learn more about digital signatures.

UI customization

Nutrient offers extensive UI customization options, allowing you to tailor the viewer to match your application’s look and feel. You can hide, reorder, or style UI elements to fit your specific needs.

Conclusion

You should now have our Laravel PDF viewer up and running in your web application. If you hit any snags, don’t hesitate to reach out to our Support team for help.

You can also integrate our JavaScript PDF viewer using web frameworks like Angular, Vue.js, and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

FAQ

Below are some frequently asked questions about Laravel PDF viewers.