Building a Laravel Vue.js PDF Viewer: A Step-by-Step Guide

Laravel and Vue.js are a powerhouse duo for modern web development. Combining Laravel’s robust backend capabilities with Vue.js’s reactive front end, you can create engaging, dynamic web applications. In this blog post, we’ll walk through creating an application that allows users to load PDFs into a viewable format right in the browser.

Prerequisites

Before diving in, ensure you have the following installed:

  • PHP (>=7.3)
  • Composer
  • Node.js and npm
  • Laravel CLI

Step 1: Setting Up Laravel and Vue.js

Install Laravel

First, create a new Laravel project:

bash

composer create-project --prefer-dist laravel/laravel pdf-app
cd pdf-app

Install Vue.js

Next, install Vue.js:

bash

npm install vue
npm install vue-loader vue-template-compiler

Configure Webpack

Add Vue.js support in webpack.mix.js:

js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

Create app.js in resources/js:

js

import { createApp } from 'vue';
import App from './components/App.vue';

createApp(App).mount('#app');

Step 2: Creating the Vue Component for PDF Viewing

Install PDF.js

PDF.js is a powerful library for rendering PDFs in a browser. Install it using npm:

bash

npm install pdfjs-dist

Create the Vue Component

Create App.vue in resources/js/components:

vue

<template>
  <div>
    <input type="file" @change="loadPdf" />
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';

export default {
  methods: {
    loadPdf(event) {
      const file = event.target.files[0];
      if (file.type !== 'application/pdf') return;

      const reader = new FileReader();
      reader.onload = async (e) => {
        const pdfData = new Uint8Array(e.target.result);
        const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
        const page = await pdf.getPage(1);

        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.$refs.pdfCanvas;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

Step 3: Blade Template and Routes

Update Blade Template

Create welcome.blade.php in resources/views:

html

<!DOCTYPE html>
<html>
<head>
  <title>PDF Viewer</title>
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
  <div id="app"></div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Set Up Route

Add the following to routes/web.php:

php

Route::get('/', function () {
    return view('welcome');
});

Step 4: Compile Assets and Run the App

Compile Assets

Use the following command to compile the assets:

bash

npm run dev

Run the Laravel Server

Finally, start the Laravel development server:

bash

php artisan serve

Open your browser and navigate to http://127.0.0.1:8000. You should see the file input and PDF viewer which is to use.

Conclusion

With these steps, you have a fully functional Laravel Vue.js application that can load and display PDFs. This is just the beginning—feel free to expand and customize your application further!

Fuel my creative spark with a virtual coffee! Your support keeps the ideas percolating—grab me a cup at Buy Me a Coffee and let’s keep the magic brewing!

10 thoughts on “Building a Laravel Vue.js PDF Viewer: A Step-by-Step Guide”

  8. viber官网
    Reply

    Hey there would you mind letting me know which hosting company you’re
    using? I’ve loaded youhr blo iin 3 compketely different
    browsers andd I must say this blog loads a lot faster then most.
    Can youu suggest a good hosting provider at a fair price?
    Thanks, I appreciate it!

    Also visit my homepage :: viber官网

Leave a Reply to signal官网 Cancel reply

Your email address will not be published. Required fields are marked *