PDF Header Image wont display

Mukesh commented on Oct 19, 2020

Hello, we are trying to display the image logo in the header but it won't display. Same code working in the body. Below is my header code.

<div class="page-header" style="height:65px; margin-right: 0px; padding: 0px;">
		<div style="color:#333333; width:100%; font-size:11px; border-bottom:1px solid #666666; padding-bottom:5px; height: 40px;">
			<div style="float: left; text-align:left; width:70%;">
				<strong style="font-size:14px; color:#000000;"><?php echo $dataArray['company_name'];?></strong><br>
				<span style="font-size:10px; color:#333333; font-style: italic;">Report for <?php echo $dataArray['from'];?> to <?php echo $dataArray['to'];?></span>
			</div>
			<div style="float: right; width:30%;">
				<a style="float:right;"><img src="<?php echo $dataArray['logo'];?>" style="float:right; width:80px; margin-right: 2px;"></a>
			</div>
		</div>
      </div>

Result:

It's argent based we have to deliver ASAP.

KoolReport commented on Oct 19, 2020

Could you please use the full url for image, you may try to echo the url to header to check if the url is correct.

David Winterburn commented on Oct 19, 2020

Please put your image in an img tag in your pdf view's body. Set its style = "display:none" to hide it in body.

The reason is that the headless browser rendering pdf for Export package doesn't make separate requests for its header and footer content. Thus, we need to make the image be retrieved in body.

Please also remember to set your server's (Apache, Nginx, lighttpd, etc) cache policy enabled if needed.

Mukesh commented on Oct 19, 2020

I did manualy below is the encrypted url of image: Same URL working in body but not working in header. I already with style = "display:none"

http://localhost:8000/cms/logo/eyJpdiI6IlNVNWhFNWtHTll1RUFIZXpuTnNcL1dnPT0iLCJ2YWx1ZSI6ImNjK1p1M1VXb3RMSGMzc0dZNFFUXC9pUkdrNmV5dmpEZDNBd1wvTjVLZU03RGpoT0JUXC80Tml5T0VuVk5XS3RkanVPb2tJZkZzODVJdkVjTmNRakJcL0t2TUQyODdYU0JpYmJWdVwvVWkxekQ4Y2cxN3kwSk1cL1FoQ1BQM3R1VmlSSGk2V1NRTGYyTmNBMTZzbFJINHp6cmM0TnFhXC9mRWNwZmxPNUtCOXVNbUFrT2lGdmhEQ0hwRkdZcGZwSW9yc3MrbXJsSjgzeUpUdm9rOVZ1eWI3ellXS1JhZEVqWDBzbnVlQzNENmg4c0liYkE5OWdocVJkaDB5RkYwWDRYT28zakhCWVFSQkVcL29oTHh6TjVneDZQdmM1RkpcL1Rud3NwQmQwZWwxTzFBYXA4bEVybmdQSlQ4YWdReEJVK0lUUWdQVEZXIiwibWFjIjoiN2VkNmJhZGI5MDFjNWQ5ZTI5OWQyMTUwMGI0NjM1YWY1NTM1NzM0N2VmNzAzNTQ4NzBlYzdmMTY2YjczNjM4MyJ9

When i am trying with this URL: "https://www.lawrbit.com/wp-content/uploads/2019/08/cropped-logonew-1-1.png" working fine without body image tag.

KoolReport commented on Oct 19, 2020

You get the working url, make two img tags. One is in header and another is in body. The img in body should have "display:none" style while img in header does not.

Mukesh commented on Oct 19, 2020

I did the same thing but stil not working.

<img src="<?php echo $dataArray['logo'];?>" style="float:right; width:80px; margin-right: 2px; display: none;">
	<div class="page-header" style="height:65px; margin-right: 0px; padding: 0px;">
		<div style="color:#333333; width:100%; font-size:11px; border-bottom:1px solid #666666; padding-bottom:5px; height: 40px;">
			<div style="float: left; text-align:left; width:70%;">
				<strong style="font-size:14px; color:#000000;"><?php echo $dataArray['company_name'];?></strong><br>
				<span style="font-size:10px; color:#333333; font-style: italic;">Compliance Status Report for <?php echo $dataArray['from'];?> to <?php echo $dataArray['to'];?></span>
			</div>
			<div style="float: right; width:30%;">
				<a style="float:right;"><img src="<?php echo $dataArray['logo'];?>" style="float:right; width:80px; margin-right: 2px;"></a>
			</div>
		</div>
	</div>

David Winterburn commented on Oct 20, 2020

Hi,

Which type of server were you using in your local development? Please enable its cache policy, for example with Apache:

https://www.serverlab.ca/tutorials/linux/web-servers-linux/improve-website-performance-by-enabling-caching-in-apache/

You could google other servers' cache enabled method. If your local server didn't enabled cache policy Export package wouldn't be able to use the image cache to render it in header and footer.

Mukesh commented on Oct 20, 2020

We are using Apache server, Cache policy already enabled we also checked on the server its not working.

David Winterburn commented on Oct 20, 2020

Would you please open your local header image in your browser or Postman software and check its response header (not request header) to see if there's a field like this:

Cache-Control: max-age=<some number>

For example with Chrome you could open dev tool (F12), choose tab Network, choose the image to see its response header information. If there's no Cache-Control field or it says Cache-Control: no-cache, the image won't be shown in header even if it's already loaded in body.

Mukesh commented on Oct 20, 2020

This is the cache result:

Cache-Control: max-age=0, must-revalidate, no-store, nocache, private

David Winterburn commented on Oct 20, 2020

I think that's effective as no cache at all. Please google ways to set your cache's max-age to a positive number.

Mukesh commented on Oct 21, 2020

We set header cache, Now header cache result below: Cache-Control: max-age=2592000 But still, the logo not visible in the header. and the same image code working in the body.

KoolReport commented on Oct 21, 2020

May I see the content of $dataArray['logo'];?

David Winterburn commented on Oct 21, 2020

Here's a response header from our image which works pdf header:

HTTP/1.1 200 OK
Date: Wed, 21 Oct 2020 07:33:24 GMT
Server: Apache/2.4.41 (Ubuntu)
Last-Modified: Wed, 21 Oct 2020 07:26:39 GMT
ETag: "599-5b22944b4fb20"
Accept-Ranges: bytes
Content-Length: 1433
Cache-Control: max-age=86400
Expires: Thu, 22 Oct 2020 07:33:24 GMT
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: image/png

Would you please post your full response header? Thanks!

Mukesh commented on Oct 21, 2020

Below is value of: $dataArray['logo']; Encrypted value of image

David Winterburn commented on Oct 21, 2020

I've just checked your image url. The response header said:

    cache-control: no-cache, private

Please make sure of your server's cache control. Thanks!

KoolReport commented on Oct 21, 2020

@Mukesh, let try the url instead of the data image embedded.

Mukesh commented on Oct 21, 2020

Thanks a lot for helping me out. The problem was with cache-control:! thanks!

KoolReport's Forum

PDF Header Image wont display #1670

Build Your Excellent Data Report