KoolReport's Forum

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

PDF Header Image wont display #833

Open Speedum Technologies opened this topic on on Apr 26, 2019 - 19 comments

Speedum Technologies commented on Apr 26, 2019

This is the header

<div style="border-bottom: 1px solid #dedede">
<table style="font-family: Arial; width: 100%; font-size: 13px;">
  <tr>
    <td style="width: 625px">
       <table>
	 <tr><td><img src="../img/sample-logo.png" alt="Xcel-RCM" height="65"></td></tr>
	</table>
    </td>
    <td style="font-family: Arial; width: 625px; text-align:right;">
	<table style="font-family: Arial; width: 100%; font-size: 13px; padding: 10px 0; text-align:right;">
	  <tr>
            <td style="font-family: Arial; float: right;">
          <h3 style="font-family: Arial; font-size: 22px; font-weight: 600; text-transform: uppercase; margin: 0 0 5px 0;">
            Name 
         </h3>
         </td>
         </tr>
	 <tr>
            <td style="float: right;">
              <p style="font-family: Arial; font-size: 15px; margin: 0 0 5px 0;">
                 Address
              </p>
             </td>
         </tr>
	  <tr>
              <td style="float: right;">
                <p style="font-family: Arial; font-size: 16px;">
                  <span style="font-family: Arial; margin: 0 0 5px 0; font-weight:600;">
                    
                </p>
              </td>
          </tr>
       </table>
       </td>
        </tr>
       </table>
</div><br>

I am injecting header like this to be displayed in the top of PDF "header"=>array("height"=>"150px","contents"=>$header),

Its not rendering the image. please refer the screenshot.

and in footer

<table style="font-family: Arial; border-top: 1px solid #dedede; width: 100%; font-size: 13px; text-align: left;">
 <tr>
   <td style="width: 8%; font-weight: 600;">Powered By:</td>
   <td style="width: 20%;">xyz company</td>
   <td style="width: 12%; font-weight: 600;">Print Date & Time:</td>
   <td style="width: 15%;">'.date("Y-m-d - H:i:s").'</td>
   <td style="width: 8%; font-weight: 600; margin-top:10px">Printed By:</td>
   <td style="width: 15%; margin-top:10px;">'.$_SESSION['uname'].'</td>
   <td style="width: 5%; font-weight: 600;">Page:</td>
   <td style="width: 15%;">{pageNum} of {numPages}</td>
  </tr>
</table><br>

injecting footer like "footer"=>array("height"=>"40px","contents"=>$footer). Please refer the screenshot footer html is also not aligned.

David Winterburn commented on Apr 26, 2019

Hi there,

Regarding images or any other resource files in header or footer, at the moment Phantomjs doesn't support async resources when rendering header or footer. Thus any image tag is an empty place holder. There's an work around by adding your image anywhere in your page but hide it with css like this:

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65" style="display:none">

As for your footer alignment issue, it's most likely CSS issue. I recommend removing all style rules to see how it works. Then add back each rule to test the result.

Let us know if there's any issue. Thanks!

Speedum Technologies commented on Apr 26, 2019

Well thank you David for such a quick response...

Speedum Technologies commented on Apr 29, 2019

Hi David I have tried the workaround you have told. I am still not able to display the image in the header, can you elaborate on this? Its still not loading the image in the header. Also PDF header has margin from top and footer from bottom, how can I reduce that? .Horizontal lines above and below the header and footer is for you to see how much margin header and footer is taking.

Speedum Technologies commented on Apr 30, 2019

Hi David, we are awaiting feedback, its very urgent because we need to deliver this project asap

David Winterburn commented on Apr 30, 2019

Hi,

Please post your export's php code and your report's PDF view file for us to check them. Thanks!

Speedum Technologies commented on Apr 30, 2019
$org_name = "XYZ Pvt. Ltd";
$org_address = "Address";


$img = '../img/sample-logo.png';
$header = '
<div style="border-bottom: 1px solid #dedede;">
 <table style="font-family: Arial; width: 100%; font-size: 13px;">
   <tr>
    <td style="width: 625px">
     <table>
       <tr>
         <td>
           <img src="'.$img.'" alt="'.$org_name.'" height="65">
         </td>
       </tr>
     </table>
    </td>
    <td style="font-family: Arial; width: 625px; text-align:right;">
      <table style="font-family: Arial; width: 100%; font-size: 13px; padding: 10px 0; text-align:right;">
        <tr>
          <td style="font-family: Arial; float: right;">
            <h3 style="font-family: Arial; font-size: 22px; font-weight: 600; text-transform: uppercase; margin: 0 0 5px 0;">'.$org_name.'</h3>
         </td>
       </tr>
       <tr>
         <td style="float: right;">
           <p style="font-family: Arial; font-size: 15px; margin: 0 0 5px 0;">'.$org_address.'</p>
         </td>
        </tr>
	<tr>
        </tr>
</table>
  </td>
     </tr>
	</table>
	  </div>
	   <br>';

$footer = '<table width="100%" style="font-family: Arial; border-top: 1px solid #dedede; font-size: 13px; text-align: left;margin-top:20px;">
<tr>
  <td style="width: 65px; font-weight: 600;text-align:right;">Print date & time:</td>
  <td style="width: 180px; text-align:left;">'.date("Y-m-d - H:i").'</td>
  <td style="width: 10px; font-weight: 600; text-align:right;">Printed By:</td>
  <td style="width: 190px;text-align:left;">'.$_SESSION['uname'].'</td>
  <td style="width: 10px; font-weight: 600; text-align:right;">Page:</td>
				<td style="width: 15px;">{pageNum} of {numPages}</td>
				</tr>
			</table>';
$this->loadKoolReport();
				$srcfile = 'Views/pdf/invoice';
				$mypage = new MyReport(array(
				 "orgHeader"=>$orgHeader,
				 "mainHead"=>$mainHead,
				 "secondaryHead"=>$secondaryHead,
				 "print_get_bill_header"=>$print_get_bill_header,
				 "print_get_bill_services"=>$print_get_bill_services,
				 "print_get_bill_settlement"=>$print_get_bill_settlement,
				 "printedby"=>$_SESSION['uname'],
				));
				$mypage->export($srcfile)
				->pdf(array(
					"header"=>array("height"=>"180px","contents"=>$header),
					"format"=>"A4",
					"orientation"=>"landscape",
					"footer"=>array("height"=>"65px","contents"=>$footer),
					"margin"=>array(
        			"top"=>"0in",
        			"bottom"=>"0in",
        			"left"=>"0in",
        			"right"=>"0inx`"
    				),
					 
				))
				->toBrowser("invoice.pdf",true); 

Please find the above code where we have defined html for header and footer and screenshot showing the output. As requested earlier we also want to reduce spacing from header top.

You have also mentioned a workaround __"There's an work around by adding your image anywhere in your page but hide it with css like this:

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65" style="display:none">"__ how will it display image in the header.

David Winterburn commented on May 2, 2019

Hi,

For the header image problem, please put this image tag:

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65" style="display:none">

anywhere in your report's PDF view file which I didn't see here.

For the header top blank space, your margin setup seems ok, just please try reducing your header's height:

"header"=>array("height"=>"180px","contents"=>$header),

Let us know the result. Thanks!

Speedum Technologies commented on May 2, 2019

David I have added

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65" style="display:none">

in the PDF body, its style is style="display:none" that is why its not displaying, I want to understand, if I add the image tag anywhere else in the document, how it will display the image in header, which is currently displaying alt text "XYZ Pvt. Ltd" (Please refer screenshot in my last msg).

I have added top and bottom border on both header and footer, height is fine, but there is blank space above header and below footer(screenshot below), how can I reduce that...

David Winterburn commented on May 2, 2019

Hi,

Please only set style="display:none" for the image tag in the PDF view file while using the normal image tag (no "display:none") in the header's html content.

What we want to achieve is for phantomjs to load the image resource when rendering the PDF view but don't display it (the image) in the page but only in headers.

The reason for this trick is that so far PhantomJS hasn't supported loading async resource in headers and footers. So we must load headers' resource in the body (but not display them). Let us know if you need further guide. Thanks!

Speedum Technologies commented on May 2, 2019

In body

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65" style="display:none">

in header

<img src="../img/sample-logo.png" alt="Xcel-RCM" height="65">

and the output is

David Winterburn commented on May 2, 2019

Hi,

Please test this: remove style="display:none" in the body's image tag and see if the image shows in the body? Thanks!

Speedum Technologies commented on May 2, 2019

Here

David Winterburn commented on May 2, 2019

Looks like relative path to resource won't work for headers. Please change both your image tags' src attribute in body and header from using relative path:

src="../img/sample-logo.png"

to using absolute path:

src="http://<hostname>/path/to/sample-logo.png"

Let us know the result. Thanks!

Speedum Technologies commented on May 2, 2019

Hey David, issue remains the same, same result as the last message

David Winterburn commented on May 2, 2019

Ok, now please replace your image tags with this one to both your PDF view file and header content:

<img src="https://cdn1.mywork.com.vn/company-logo-medium/201704/1ae101080dc5.png" alt="Xcel-RCM" height="65">

Post the result screenshot for me. Thanks!

Speedum Technologies commented on May 2, 2019

Well David, It does display the image in case I add the url given by you, but not when I add the url to our logo

Whats the difference?

David Winterburn commented on May 2, 2019

Hi,

What happens if you replace my test image url with your absolute image url (both image tags don't have style="display:none" because we want to check if it can show in the body as well)? Have screenshots if possible. Thanks!

Speedum Technologies commented on May 2, 2019

We are using image src from other server its working anyway, so header image issue is resolved. In my previous queries I have shared a screenshot of the PDF, I have added top border on the header and border bottom in the footer to show how much extra space from top and bottom is generated, how can I reduce that?

David Winterburn commented on May 7, 2019

Hi,

Sorry for the late reply. On the top blank space matter, please try to use a simple string header and set margin-top to 0 to see its effect. If it works, please adjust your header's table padding, margin. Otherwise, if a simple string header's top blank still too large for your like, let us know. 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