Export : Can't add image in header and footer with relative path

Tawfiq CADI TAZI commented on Jun 5, 2019

Can't add image in header and footer with relative path. Also tags header and footer does not work. I have to use div with class page-header and page-footer.

KoolReport commented on Jun 6, 2019

Here is an example:

index.php

<?php
require_once "Report.php";

$report = new Report;
$report->run()->export("Report")->pdf(array(
    "format"=>"A4",
    "orientation"=>"landscape",
    "zoom"=>2
))->toBrowser("image_header.pdf",true);

Report.php

<?php

require_once "../../../../core/autoload.php";

class Report extends \koolreport\KoolReport
{
    use \koolreport\export\Exportable;
}

Report.view.php

<html>
<head>
</head>
<body style="margin-left:30px;margin-right:30px;">
    <div class="page-header" style="height:48px;">
        <div><img src="http://full/path/to/image/duck.png" style="height:48px"/></div>
    </div>
    <div class="container" style="padding-top:30px;padding-bottom:30px;">
        <h1>Page 1</h1>
    </div>

    <div class="page-break"></div>
    
    <div class="container" style="padding-top:30px;padding-bottom:30px;">
        <h1>Page 2</h1>
    </div>

    <div class="page-footer" style="height:48px;">
        <div><img src="http://full/path/to/image/duck.png" style="height:48px"/></div>
    </div>
</body>
</html>

Please make sure that you use full url to the image file.

David Winterburn commented on Jun 6, 2019

Hi there,

It's a limitation of PhantomJS where header and footer can't sent async requests for resources so the image could not be retrieved.

But there's one workaround if you don't want to use div page-header and page-footer. In your pdf view file's body, just include hidden images (with CSS style="display:none") of those relative paths. Then the header and footer could display the images because the resources have been retrieved in body.

Let us know if this works for your case. Thanks!

KoolReport commented on Jun 6, 2019

Thanks David, your solution is good! Yes, we can use hidden image for purpose of loading it.

KoolReport's Forum

Export : Can't add image in header and footer with relative path #906

Build Your Excellent Data Report