Print the content of laravel blade (using Laravel 5.2)

10,621

I know it's too late to answer but I did the same thing today and decided to post my solution here as well so that it might help someone in the future.

Required Tools:

  1. jQuery
  2. jQuery.print

Solution Steps:

Step 1: The view where the print button is located in.

dashboard.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Document</title>
</head>

<body>

  <button id="print"> Print </button>

  <script src="{{ asset('js/jquery.js') }}"></script>
  <script src="{{ asset('js/jquery.print.js') }}"></script>
  <script src="{{ asset('js/scripts.js') }}"></script>
</body>

</html>

Step 2: The view that is going to be printed.
Assume I have a view like this and I want to print this out:

print.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Step 2: The route.
We need a route to call our view through that.

web.php

Route::post('/print', function() { return view('print'); });

Step 3: The jQuery script.
We are going to call the view content by AJAX and pass it to the jQuery.print() function for printing.

scripts.js

$('#print').on('click', function() {

  let CSRF_TOKEN = $('meta[name="csrf-token"').attr('content');

  $.ajaxSetup({
    url: '/print/',
    type: 'POST',
    data: {
      _token: CSRF_TOKEN,
    },
    beforeSend: function() {
      console.log('printing ...');
    },
    complete: function() {
      console.log('printed!');
    }
  });

  $.ajax({
    success: function(viewContent) {
      $.print(viewContent); // This is where the script calls the printer to print the viwe's content.
    }
  });
});

That's all, customize the codes according to your own requirements.

Share:
10,621
MA-2016
Author by

MA-2016

Updated on June 04, 2022

Comments

  • MA-2016
    MA-2016 over 1 year

    I want to print the content of laravel blade file....file contains the html table of users...when user click on print button it must redirect to pop up window of print... Please help to resolve this issue.

    Current code of reading the content of file...i don't know how to give the path of this file.....file is in resource/views/reports/table.blade.php

    Current code shows me exception:

    FileNotFoundException in Filesystem.php line 41: File does not exist at path printview_table

    Code in Controller

    public function printfile()
        {
            $filename = '/reports/printview_table.blade.php';
            try
            {
                $contents = File::get($filename);
                printfile($contents);  
            }
            catch (Illuminate\Filesystem\FileNotFoundException $exception)
            {
                die("The file doesn't exist");
            }
        }
    
  • MA-2016
    MA-2016 almost 6 years
    I can do this task using javascript but how can i read the blade file in javascript function ??
  • Unknownymous
    Unknownymous almost 3 years
    Hi, I followed your code above using laravel.. but it gives me jquery error 403 (forbidden). Should I use specific version of jQuery?
  • Mohandes
    Mohandes almost 3 years
    @Unknownymous That's not related to the jQuery version, just make sure you set the CSRF_TOKEN correctly.
  • Unknownymous
    Unknownymous almost 3 years
    yes , I already got it. now my problem is how can I catch the event when the user clicked the PRINT the the page will redirected to other page if CANCEL BUTTON then it remain on the same page?
  • nafischonchol
    nafischonchol over 2 years
    In print.blade.php page bootstrap not working. What should do for that?
  • Mohandes
    Mohandes over 2 years
    @nafischonchol You need to include the Bootstrap CSS via .print() options, have a look: doersguild.github.io/jQuery.print