Blog Post

How to Build a Laravel PDF Viewer

In this post, we provide you with a step-by-step guide outlining how to deploy PSPDFKit’s Laravel PDF viewer.

Laravel is an MVC framework for PHP. It builds on top of PHP standards and conventions, making it easier for developers to create completely customizable, full-featured apps.

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.

PSPDFKit 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 e-signature.

Requirements to Get Started

To get started, you’ll need:

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

Create a new Laravel project:

laravel new pspdfkit-app

Change to the created project directory:

cd pspdfkit-app

Adding PSPDFKit to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

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.
Once the download is complete, extract the archive to your computer.
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

Add the PDF document you want to display to the public folder. You can use our demo document as an example.
Navigate to the resources/views/welcome.blade.php file.
Add an empty <div> element with a defined height to where PSPDFKit will be mounted:

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

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

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

Initialize PSPDFKit for Web in Laravel by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  		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 PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="height: 100vh"></div>

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

		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				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>

Serving Your Website

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

php artisan serve

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

pspdfkit demo

Adding Even More Capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular Laravel guides:

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

What is a Laravel PDF viewer?

A Laravel PDF viewer uses Laravel to render and view PDF documents directly in a web browser. It allows users to view PDFs without downloading them or using an external PDF reader application.

How do I integrate PSPDFKit into a Laravel project?

To integrate PSPDFKit into a Laravel project, follow these steps:

Download the PSPDFKit Web library and extract the files.
Copy the pspdfkit.js file and other necessary assets into your project’s public/assets directory.
Add an empty <div> in your Blade view file where PSPDFKit will be mounted.
Include the pspdfkit.js script and initialize PSPDFKit using the PSPDFKit.load() function.

Can I customize the PDF viewer built with PSPDFKit?

Yes, PSPDFKit allows extensive customization of the PDF viewer. You can configure the toolbar, annotation tools, and the overall UI to fit your specific needs and design preferences.

What are some common use cases for a Laravel PDF viewer?

Common use cases include viewing contracts, reports, manuals, and other documents that need to be displayed and interacted with directly within a web application.

What benefits does PSPDFKit offer for PDF viewing in Laravel?

PSPDFKit provides a robust solution for PDF viewing with features such as annotations, form filling, digital signatures, and more. It enhances user experience with its polished UI and extensive capabilities for document interaction.

Author

Hulya Masharipov Technical Writer

Hulya is a frontend web developer and technical writer at Nutrient who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

Explore related topics

Web Laravel How To PDF Viewer