KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

How to display image in exported report from uploads folder? #1394

Open gentlegriffon opened this topic on on Apr 19, 2020 - 19 comments

gentlegriffon commented on Apr 19, 2020

Hello support team, I need your help on this issue that wasted my time.. I want to display company logo in the header, coming from public/uploads folder, nothing seems to work to show this image, though header text does show up when exported to pdf. I tried different syntax from the answers online and your forum, but they didn't work

In my xxxReport.view.php I have this code:


<?php 
use \koolreport\widgets\koolphp\Table;
?>
<!DOCTYPE html>
<html>
    
<!-- language based page style -->
<?php
if ($this->lang == 'ar') {
    echo '<style>body,.table {text-align: right; direction: rtl;}</style>';
} else {
    echo '<style>body,.table {text-align: left; direction: ltr;}</style>';
}
?>

<!-- general styles -->

<style>
    @media print {
        body {
            width: 100%;
        }

        table.table thead {
            background-color: #324148;
            color: #fff
        }

        table th,
        table td {
            text-align: center;
            padding: 5px;
            line-height: normal;
            border: 1px solid grey;
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }

        .table {
            display: table;
            width: 100%;
            border-collapse: collapse;
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }
    }

</style>

<body style="margin:1in">

    <!-- display translated and aligned header -->
    <img src="<?$this->load->helper('/uploads/'.$this->company_info->logo)?>" />

.
.
.

And in xxxReport.php I have:



<?php

namespace App\Reports;

use App\Http\CommonClasses\custom;

class JournalVouchersReportSetup extends \koolreport\KoolReport
{
    use \koolreport\laravel\Friendship;
    use \koolreport\export\Exportable;
    
    public function setup () {

        $user=custom::get_current_user();
        $co=custom::get_company_info();
        $this->user_info = $user;
        $this->company_info = $co;
        $this->lang = app()->getLocale();
        
        if (app()->getLocale() == "ar") {
            $this->src("mysql")
                ->query("
                some query
            ")
                ->pipe($this->dataStore("xxx"));
        } else {
            $this->src("mysql")
                ->query("
                some query
                ")
                ->pipe($this->dataStore("xxx"));
        }
     
    }
}



So what is the problem? I would appreciate your quick response Thanks

David Winterburn commented on Apr 20, 2020

Hi,

If you use the Export package please add the image to your Pdf view's header like this this documentation:

https://www.koolreport.com/docs/export/get_started/#export-to-pdf-header-and-footer-of-the-page

If you use other packages please let us know. Thanks!

gentlegriffon commented on Apr 20, 2020

Thanks for replying @David Winterburn

mmm I tried as you said, but it didn't work.

<body style="margin:1in">

    <div class='page-header'>
        <div style="text-align:right"><img src="<?$this->load->helper('/uploads/'.$this->company_info->logo)?>" />    
        </div>
    </div>

.
.
.

And the link you posted doesn't mention anything about adding a logo or something..

gentlegriffon commented on Apr 22, 2020

Hello? please assist

David Winterburn commented on Apr 23, 2020

Hi,

Sorry, I forgot that this issue with image in header/footer of Export package which uses PhantomJS has been mentioned a number of times in the forum.

So one limitation of PhantomJS is that it could not make a request to get server's resources (image, css, js) in its header/footer so link, script, img, etc won't work by default in header/footer.

Luckily there's one workaround by adding the same img, link, etc to the page's body (you could hide them by using css style="display:none"). That makes the resources available when PhantomJS render header/footer. So in your case I would try the following code:

<body style="margin:1in">
    <img src="<?$this->load->helper('/uploads/'.$this->company_info->logo)?>" style="display:none" />
    <div class='page-header'>
        <div style="text-align:right"><img src="<?$this->load->helper('/uploads/'.$this->company_info->logo)?>" />    
        </div>
    </div>
...

Please try this and let us know your result. Thanks!

gentlegriffon commented on Apr 25, 2020

Thank you for your help.

There is hope:

my image doesn't show (http://127.0.0.1:8000/uploads/1587816362.jpg) , but an external image like (http://www.dpriver.com/pp/sqlpponline.png) shows up. why?

Here is the edited code:


<body style="margin:1in; ">
    <?php 
        $url = 'http' . (isset($_SERVER['HTTPS']) ? 's' : '') . '://' . "{$_SERVER['HTTP_HOST']}";
        $logoSrc = $url.'/uploads/'.$this->company_info->logo;
    ?>
    <img style="display: none;" width="100" height="100" src="<?php echo $logoSrc; ?>" />
    <img style="display: none;" width="100" height="100" src="http://www.dpriver.com/pp/sqlpponline.png" />

    <!-- display translated and aligned header -->
    <header style='height:200px; text-align:right; direction: rtl;'>
        <div style="width: 20%;  float:right;">
            <img width="100" height="100"  src="<?php echo $logoSrc; ?>" />
            <img width="100" height="100"  src="http://www.dpriver.com/pp/sqlpponline.png" />
        </div>
        <div style="width: 80%;   float:right;">
            <?php
            if ($this->lang == 'ar') {
                echo '<div style="direction: rtl; text-align: right;">' ;
                    echo '<h1>' ;
                    echo $this->company_info->co_ar_name;
                    echo '</h1>';
                    echo '<h2> العنوان: ';
                    echo $this->company_info->address_line_one;
                    echo '</h2>';
                    echo '<h3>الرقم الضريبي: ';
                    echo $this->company_info->vat_no;
                    echo '</h3>';
                    echo '<h4>';
                    echo 'تقرير مراكز التكلفة';
                    echo '</h4>';
                echo '</div>' ;

            } else {
                echo '<div style="direction: ltr; text-align: left;">' ;
                    echo '<h1>';
                    echo $this->company_info->co_en_name;
                    echo '</h1>';
                    echo '<h2>Address: ';
                    echo $this->company_info->address_line_one;
                    echo '</h2>';
                    echo '<h3>Vat No: ';
                    echo $this->company_info->vat_no;
                    echo '</h3>';
                    echo '<h4>';
                    echo 'Cost Centers Report';
                    echo '</h4>';
                echo '</div>' ;
            }
            ?>
        </div>
    </header>
.
.
.
gentlegriffon commented on Apr 26, 2020

Hellooo @David Winterburn

David Winterburn commented on Apr 27, 2020

Hi,

I think it's because your localhost doesn't enabled cache-control/expire policy which online servers often do. In our case with apache on Ubuntu, we install mod_expire for apache:

sudo a2enmod expires

and add the following lines to apache2.conf:

<Directory path/to/webfolder>
    ...
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</Directory>

Depending on your web server type please try to enable its expire module and cache-control policy for either the your folder or images only.

gentlegriffon commented on May 2, 2020

Thanks for replying, please explain how to do this in xampp server, I can't find anything about this .. I'm lost. And what is exactly "path/to/webfolder" ? Considering the my image is at http://127.0.0.1:8000/uploads/1587816362.jpg and the local path is like D: ....project\public\uploads\1572937934.png

All I want is to show the logo properly :/

David Winterburn commented on May 4, 2020

Try this if you use XAMPP on Windows:

https://stackoverflow.com/questions/10708917/xampp-how-to-load-mod-expires

Otherwise, let us know. Thanks!

gentlegriffon commented on May 4, 2020

Hello David, I followed the steps in the answer and restarted the server, pdf still doesn't render the image :/

David Winterburn commented on May 5, 2020

Please add the following rule to the file "httpd.conf" of apache (inside xampp) or to the file ".htaccess" in your project folder:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=604800, public "
</FilesMatch>

Let us know the result. Thanks!

gentlegriffon commented on May 6, 2020

I tried adding it in project, then in httpd.conf .. restarted the server and didn't work :/ other suggestions? is it normal I'm facing all these obstacles to just display an image from uploads??

David Winterburn commented on May 6, 2020

I've tested export on our Windows 10 machine and the header image works ok with the following config:

# C:\xampp7.2.30\apache\conf\httpd.conf

DocumentRoot "C:/xampp7.2.30/htdocs"
<Directory "C:/xampp7.2.30/htdocs">
	Options Indexes FollowSymLinks MultiViews Includes ExecCGI
	AllowOverride All
	Order Allow,Deny
	Allow from all
	Require all granted
</Directory>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=604800, public "
</FilesMatch> 
...
LoadModule expires_module modules/mod_expires.so
<!-- MyReportPDF.view.php -->

<body style='margin:150px 50px'>
    <div style='display: none'>
        <img src="http://127.0.0.1/path/to/logo.png" />
    </div>
    <div class='page-header' style='height:30px'>
        <span>Page {pageNum}/{numPages}</span>
        <img src="http://127.0.0.1/path/to/logo.png" />
    </div>

Please post the relevant parts of your httpd.conf and report pdf view file for us to check them for you. Thanks!

gentlegriffon commented on May 6, 2020

Thanks, I added sections similar to your httpd.conf + restarted the server + revised my code. But can't see what's wrong. Here is my whole view code:

<?php 
use \koolreport\widgets\koolphp\Table;
?>
<!DOCTYPE html>
<html>

<!-- language based page style -->
<?php
if ($this->lang == 'ar') {
    echo '<style>body,.table {text-align: right; direction: rtl;}</style>';
} else {
    echo '<style>body,.table {text-align: left; direction: ltr;}</style>';
}
?>

<!-- general styles -->

<style>
    @media print {
        body {
            width: 100%;
        }

        table.table thead {
            background-color: #008a99;
            color: #fff
        }

        table th,
        table td {
            text-align: center;
            padding: 5px;
            line-height: normal;
            border: 1px solid grey;
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }

        .table {
            display: table;
            width: 100%;
            border-collapse: collapse;
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }
    }

</style>

<body style="margin:1in; ">
    <?php 
        $url = 'http' . (isset($_SERVER['HTTPS']) ? 's' : '') . '://' . "{$_SERVER['HTTP_HOST']}";
        $logoSrc = $url.'/uploads/'.$this->company_info->logo;
        <!-- $logoSrc is http://127.0.0.1:8000/uploads/1587816362.jpg -->
    ?>
    <div style="display: none;">
        <img width="100" height="100" src="<?php echo $logoSrc; ?>" />
        <img width="100" height="100" src="http://www.dpriver.com/pp/sqlpponline.png" />
    </div>
    <!-- display translated and aligned header -->
    <header class='page-header' style='height:200px; text-align:right; direction: rtl;'>
        <div style="width: 20%;  float:right;">
            <img width="100" height="100" src="<?php echo $logoSrc; ?>" />
            <img width="100" height="100" src="http://www.dpriver.com/pp/sqlpponline.png" />
        </div>
        <div style="width: 80%;   float:right;">
            <?php
            if ($this->lang == 'ar') {
                echo '<div style="direction: rtl; text-align: right;">' ;
                    echo '<h1>' ;
                    echo $this->company_info->co_ar_name;
                    echo '</h1>';
                    echo '<h2> العنوان: ';
                    echo $this->company_info->address_line_one;
                    echo '</h2>';
                    echo '<h3>الرقم الضريبي: ';
                    echo $this->company_info->vat_no;
                    echo '</h3>';
                    echo '<h4>';
                    echo 'تقرير مراكز التكلفة';
                    echo '</h4>';
                echo '</div>' ;

            } else {
                echo '<div style="direction: ltr; text-align: left;">' ;
                    echo '<h1>';
                    echo $this->company_info->co_en_name;
                    echo '</h1>';
                    echo '<h2>Address: ';
                    echo $this->company_info->address_line_one;
                    echo '</h2>';
                    echo '<h3>Vat No: ';
                    echo $this->company_info->vat_no;
                    echo '</h3>';
                    echo '<h4>';
                    echo 'Cost Centers Report';
                    echo '</h4>';
                echo '</div>' ;
            }
            ?>
        </div>
    </header>

    <!-- render table -->
    <?php
        Table::create(array(

            "dataStore"=>$this->dataStore('Journal Vouchers Report'),
            "cssClass"=>array(
                "table"=>"table table-hover table-bordered table-striped"
            ),
          
        ));
    ?>


    <!-- display translated and aligned footer -->
    <div class='page-footer'>
        <?php
     if ($this->lang == 'ar') {
         echo '<span style="float:right">الصفحة {pageNum} من {numPages}</span>';
         echo '<span style="float:left;width:50%;text-align: rtl;">';
         echo  $this->user_info->name . '  تمت الطباعة بواسطة  ';
         echo '</span>';

     } else {
         echo '<span style="float:left">Page {pageNum} of {numPages}</span>';
         echo '<span style="float:right;">';
         echo 'Printed By User:' . $this->user_info->name;
         echo '</span>';
     }
    ?>
    </div>



</body>

</html>

David Winterburn commented on May 7, 2020

Hi,

All the expire module, cache-control instructions I posted is because you said you couldn't show header image with an image on your localhost. And now you use an online image "http://www.dpriver.com/pp/sqlpponline.png" from an online server you can't control.

Let me explain it more clearly. For Phantomjs to show an image in it's header/footer, the image must be cached. An image's cache control is regulated by the server and Phantomjs must respect the server's policy.

So if you want to show an image in pdf header/footer you must use either an online image where the server enables cache-control or a localhost image where you enable localhost's cache control like I instructed. Please try it and let us know the result. Thanks!

gentlegriffon commented on May 9, 2020

Hello, you actually misunderstood. When I posted my code, I clarified that I'm using to images in the header to show you and stated that "my image doesn't show (http://127.0.0.1:8000/uploads/1587816362.jpg) , but an external image like (http://www.dpriver.com/pp/sqlpponline.png) shows up. why?"

In the code there are two images.. actually and I'm following your steps one by one. The thing is, a great library like koolreport shouldn't make difficult to show a logo image! So please, I would like to give you remote access to my pc to fix this issue and the other issue I'm following on your forum (https://www.koolreport.com/forum/topics/1420)

I'm struggling with these two issues and not getting anywhere, and this is time-consuming. Please email me at gentlegriffon@yahoo.com to discuss remote access with teamviewer. ASAP. I my local time is GMT+3

Thanks, I appreciate your help

gentlegriffon commented on May 11, 2020

@David Winterburn

David Winterburn commented on May 13, 2020

We sent you an email from support@koolphp.net to gentlegriffon@yahoo.com for instuction how to get remote connection support. Thanks!

gentlegriffon commented on Jun 7, 2020

Thanks a lot for helping me out. The problem was with using laravel server that is not supported by koolreport, using xampp fixed it! thanks!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Export