Image not visible on using mpdf


#1

I am using mpdf to show image on generated pdf, but images are not shown.
I have used an image as an external resource, have tried call it by passing subfolder/imagename as src in image tag, but images are not visible.
I have also spent a lot of time in uploading image to database BLOB column and then bringing it out on pdf.
When I run my codeigniter project in browser, I can see the image.
When I run my project in exeoutput application using localhost/application name in base url, image is shown
But,
when i use http://heserver/ in base url, image stops showing.

I have also tried to use an absolute path for Data folder, no wonders. I executed application without absolute path to data folder, no wonders.

I also tried a relative path, but no wonders.

I have also tried
'<img width="30px" src="'.exo_getglobalvariable('HEPubStorageLocation', '').'rs\logo.png" />'
which returns the correct path but image is still not visible on pdf

I have started feeling depressed as this is the third time I am working in exeoutput and failed to deliver the project to client.

Can anybody help me out and save me from quitting?


#2

Please consider making the modification explained below to your project, so that generated PDF files can be saved.


#3

My issue is : image is still not visible on pdf and you are suggesting a solution regarding file download? Are you kidding me? Where did I say that my pdf is not getting downloaded. When I say image is not visible on pdf, it means there is no problem in pdf generation …
Still, I tried your suggested solution, it didnot work either.


#4

The following sample generates PDF files and includes an image into the PDF. https://download.exeoutput.com/pdfdemo.7z
It’s not mPDF but it should work similar. If it still doesn’t work, you can send us a sample that lets us reproduce the problem.


#5

In your sample code, it uses exo_unpackvirtualfile which means the image is expected to be present within the exe file. But here in my application, user will upload an image which needs to be displayed. Since users can upload different images, I cannot store the image within exe.
I can either use an external file or a image stored as BLOB. I tried both variant, none of them worked with mpdf.
Also, the pdf needs to directly open the printer dialog box for printing.
I have tried following codes to access external and BLOG image

$top.='<img width="40px" src="data:image/png;base64,'.base64_encode($this->session->userdata('logo')).'"/>';
$top.='<img width="40px" src="logo.png"/>';
$top.='<img width="30px" src="'.exo_getglobalvariable('HEPubStorageLocation', '').'rs\logo.png" />';
$top.='<img width="30px" src="'.exo_getglobalvariable('HEPubStorageLocation', '').'data\logo.png" />';

But none of them worked.
I am using the following code in generating via mpdf:

ob_clean();
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="'.$billno.'.pdf"');
header('Content-Transfer-Encoding: binary');
header('Accept-Ranges: bytes');
include($_SERVER['DOCUMENT_ROOT']."/application/views/admin/mpdf/vendor/autoload.php");
$mpdf = new \Mpdf\Mpdf();
//$mpdf->showImageErrors = true;
$mpdf->WriteHTML($top);
$mpdf->SetJS('this.print();');
$mpdf->Output();
exit;

#6

I found a working solution I think.
I need to create a data folder and place the png file inside that data folder.
Then, on web page I use the logo as under:
<img width="40px" src="logo.png"/>
But in mpdf generation code, I need to write:
<img width="60px" src="'.$_SERVER['DOCUMENT_ROOT'].'/logo.png"/>
HOwever if I place the logo directly with exe file or in some other subfolder, it doesnt work in pdf generation.
Is there any other workaround other than creating the data subfolder?


#7

@sgupta I don’t have any experience with mPDF myself, but I suspect the problem could be similar to one I’ve experience before. For security reasons it’s not possible to display image files direct from folders on a users PC, and I suspect that’s the reason they’re not being pulled into the resulting PDF. However, there is a hacky workaround.

Try creating a separate php page that streams the image from its location to the img tag used to create the PDF. So in your case, assuming the image filename is “logo.png” in a folder called “rs”…

<?php

$storagelocation=exo_getglobalvariable('HEPubStorageLocation', ''); 
$file=$storagelocation.'rs/logo.png';
if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($file).'"');
    header('Cache-Control: public, max-age=31536000');
    header('Pragma: public');
    header('Content-Length: '.filesize($file));
    header('Connection: Close');
    readfile($file);
    exit;
    }

Save the above as “logo.php”

Then in your mPDF creation code, just use something like:

<img width="40px" src="logo.php"/>

Let me know if it works!


#8

Hi @kim so you mean if I want to use any folder other than virtual “Data” one, your solution has to be implemented. Otherwise, things will work fine with Data folder? If there is any other issue that can arise while using the data folder without using an absolute path?
I am using following things in my application:

  1. WMI to do some registry write / read work.
  2. Reading image from folder to show it on web page and pdf
  3. Exporting excel
  4. Calling cURL to connect to a remote php page hosted on some web server.
    Things that I may need soon to be implemented:
  5. To read a barcode and fetch items, I may need to fire some AJAX/JS
  6. I may need to print some barcodes
  7. I may need to communicate with a local / remote mysql database
    Other than these, my application is just a normal dynamic application.

#9

Well, the issue only seems to affect the display of images in img tags in a compiled app.

My original problem was with displaying images my app had created and saved to the HEPubStorageLocation which is the path where the application stores its data on the users PC. For some reason, standard image tags failed to display images from that path via a compiled exe. (the img tags worked fine in a regular browser using uncompiled code)

It didn’t make much sense as other files could be read from and written to that location fine, it was just a problem with displaying images from that location in standard img tags in a compiled app that failed - thus the workaround.

So did the code work for the PDF?


#10

Well my problem was solved with data subfolder for now as I had to deliver the first version today. I will surely give your code a try and revert back.


#11

mPDF has a different behavior compared to Chromium. It looks like it accepts real local paths for img srr, while Chromium forbids this for security reasons.

You could have your logo.png file in the same directory as the exe file by changing the path as follows:

<img width="60px" src="'.$_SERVER['DOCUMENT_ROOT'].'/../logo.png"/>

Not tested, but in other situations, such a similar path works.