Print Invoice as PDF in Laravel 8.x using Vue Js

In this tutorial we will see how to print invoce in laravel using vue. I will show it to you without any packages. Laravel print report is very simple and easy.

PDF is one of basic requirement when you are working with erp level project or e commerce website. we may need to create pdf file for report or invoice etc. So, here i will give you very simple example for create pdf file with laravel.

Now let's see In this article, i will let you explain how to generate pdf file from html view in laravel 8 application. We mostly require to generate PDF file from html view for invoice, receipt, products etc.

I have already created a tutorial on how create html to pdf in laravel using dom pdf. You can also see it, if you want.

Read also : Laravel PDF Generator | HTML to PDF Using Laravel Dompdf

Step 1: Install Laravel 6

I am going to explain step by step from scratch so, we need to get fresh Laravel 6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Route

routes/web.php

//Download Pdf
Route::get('/pdf',function(){
   return view('invoice');
});

Step 3: Create View File

Read also : Vue Laravel CRUD Example With Vue Router & Sweet Alert

In Last step, let's create invoice.blade.php(resources/views/invoice.blade.php) for layout of pdf file and put following code:

resources/views/invoice.blade.php

@click.prevent="printInvoice" here printInvoice is function name and i've used prevent so that this page can not reload.

Step 4 : Setup Vue

Run following command to setup our vue file.

npm install
//then run
npm run watch

and than paste the following code to this following file.

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({

    el: '#app',

    methods: {

      printInvoice(){ 

        window.print()

      }
    }
});

Hope it will help you.