JakeG's avatar
Level 1

Download PDF with image using DomPDF on Laravel 8

I'm trying to download my data in my database with images and tried some tutorials I found on internet but I can't get to download those images together with the data. I used dd(); and even have a LoadView which shows the image is retrieved and being displayed okay. It's just that every time I download it as pdf the image is blank with a text saying Image not found or type unknown

These are the things I've did and tried.

  1. Implementing the PDF
Command for install package for PDF :   composer require barryvdh/laravel-dompdf
Then go to config/app.php and make some changes

'providers' => [
    ....
    Barryvdh\DomPDF\ServiceProvider::class,
],
'aliases' => [
    ....
    'PDF' => Barryvdh\DomPDF\Facade::class,
],

  1. The image which I've seen and tried from other tutorials/website
//The logo which also getting displayed in my LoadView but not getting download as PDF
<img src="assets/images/logo.png">
// I was able to fix it by turning it into this which I found from an old issue in github
 <img src="{{'data:image/png;base64,'.base64_encode(file_get_contents(public_path('assets/images/logo.png')))}}">
		  
//The image stored in my folder and database which displays it in my LoadView but doesn't display it or download it together with other data in the PDF
<img height="200" width="200" src="productimage/{{$data->prod_img}}">

// I tried the code in my logo but instead gets an error - Unclosed '(' does not match '}'
<td> <img src="{{'data:image/png;base64,'.base64_encode(file_get_contents(public_path('/productimage/{{$data->prod_img}}')))}}">

//I also did this but it's not being displayed now in my loadview nor every time I download the pdf
<img height="200" width="200" src="{{storage_path('app/public/productimage/$data->prod_img')}}">

  1. Inside my database the data type before was varchar() now I've changed it to LongBLOB but the issue remains the same and decided to turn it back to varchar()

  2. My route Route::get("/downloadPDF",[EmpController::class,"downloadPDF"]);

  3. The code in my controller

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Receipt;
use PDF;
class EmpController extends Controller
{
    public function getReceipts(){
        $data = receipt::all();
        return view('downloadReceipt', compact('data'));
    }

    public function downloadPDF(){
        $data = receipt::all();
        $pdf = PDF::loadView('downloadReceipt', compact('data'))->setOptions(['defaultFont' => 'arial']);
        return $pdf->download('data.pdf');
    }
}

and the code in my blade file

<!DOCTYPE html>
<html lang="en">
  <head>
  <link rel="stylesheet" href="assets/css/design.css">
  </head>
  <body>
    
  	<div class="container-scroller">
  		<div align="center">
 <img src="{{'data:image/png;base64,'.base64_encode(file_get_contents(public_path('assets/images/logo.png')))}}">
		  
		  <h3 class="text-center mt-3">~Customer Receipt~</h3>
  			<table id="receptTBL" style="width:100px;">
			  <thead>  
  				<tr>
  					<th >Product</th>
					<th >Quantity</th>
  					<th >Paid Amount</th>
					<th >Total Fee</th>
  					<th >Date</th>
					<th >Image</th>
  				</tr>
				</thead>  
		<tbody>

  				@foreach($data as $data)
  				<tr align="center">
  					<td>{{$data->prod_name}}</td>
  					<td>{{$data->prod_qty}}</td>
					<td>{{$data->paid_fee}}</td>
  					<td>{{$data->total_fee}}</td>
					<td>{{$data->date}}</td>
  					<td><img height="200" width="200" src="productimage/{{$data->prod_img}}"></td>
  				</tr>
  				@endforeach
		</tbody>
  			</table>
  		</div>
  	</div>
  </body>
</html>

This is also how I saved my image in my folder & database

$image=$request->image;

              $imagename=time().'.'.$image->getClientOriginalExtension();
      
                      $request->image->move('productimage',$imagename);
      
                      $data->prod_img = $imagename;
    
                      $data->save();
                      return  redirect()->back();

I'm so confused. What am I missing? What should I do?

0 likes
4 replies
christian-qode's avatar

@jakeg Make sure to use the full path of images. Relative paths will work when viewing in HTML but not when saving to PDF.

You can get the full URL with base_path or storage_path (depending on where your files are located).

About the base64 encoded image, I think you're using the {{ and }} in the wrong way. Have you PHP enabled in PDF generation? II've done it in the following way in my project:

      <img src="data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents(base_path('public/images/logo-gray.svg'))); ?>" width="120">

6 likes
JakeG's avatar
Level 1

@christian This works for me tysm. I did <img src="data:image/png;base64,<?php echo base64_encode(file_get_contents(base_path('public/productimage/'.$data->prod_img))); ?>" width="120"></td>

3 likes
owentech's avatar

It seems getting and using the absolute path simply does not work. My image showed in the pdf only when I used base64 encoding.

2 likes
Sadman's avatar

Max-width also works for me just use px instead of percentage

Please or to participate in this conversation.