Page Headers in CloudExport PDF

Alex Chartier commented on Jun 16, 2019

I seem to be having trouble getting these headers to print correctly. Here is what I am using:

$title = '<span class="title" style="text-align:center; margin-left:1.5in;">Attendee List: '.$attendeeList->eventName.'</span><span class="date">Printed on '.date("F j, Y").'</span>';
$attendeeList->run()
			->cloudExport('EventAttendeeListsPDF')
			->chromeHeadlessio('***************************************')
			->pdf(["landscape"=>false,
					"displayHeaderFooter"=>true, 
					"headerTemplate"=>$title,
					"margin"=>(object)["top"=>'2cm', "bottom"=>'1cm'],
				])
			->toBrowser("attendees.pdf");

And the attached screen grab is what is being displayed. Furthermore, the header is not being repeated on multiple pages. Any ideas?

KoolReport commented on Jun 18, 2019

Sorry for late reply, I will get you developer to answer your question.

Alex Chartier commented on Jun 18, 2019

Thank you.

David Winterburn commented on Jun 19, 2019

Hi Alex,

Please test a standard example of headerTemplate like this:

        'headerTemplate' => '
            <div id="header-template" 
                style="font-size:10px !important; color:#808080; padding-left:10px">
                <span class="date"></span>
                <span class="title"></span>
                <span class="url"></span>
                <span class="pageNumber"></span>
                <span class="totalPages"></span>
            </div>
        ',

I would include an outside div to set some styles such as font, color, etc for the header.

The "title", "date" classed spans would be auto filled with the page's title and printing date.

In your case, Then I would remove the span class "title" or "date" if you wanted to set your own title or date instead of using those page's properties:

'headerTemplate' => '
	<div id="header-template" 
		style="font-size:10px !important; color:#808080; padding-left:10px">
		<span style="text-align:center; margin-left:1.5in;">Attendee List: Event Name 1</span>
                <span >Printed on '.date("F j, Y").'</span>
	</div>
',

Please try these examples and let us know if it works for you. Thanks!

Alex Chartier commented on Jun 19, 2019

Thank you David, this has gotten me a lot farther. I am now able to get the header as I want it and it is repeating on each page.

Note, It was important to ensure the margin top was sufficiently large enough to hold the header I needed. I had to increase my top margin to 3cm to get the second line to display.

I had to play a bit with the footer to get it to work properly. I was trying to align the pageNumber/totalPages to the right but the text-align in the footer did not want to take. What I found was I needed to set the width and a margin to get it right. Below is what I needed for the footer to work right:

$footer = '<div id="footer-template" style="font-size: 10px !important; text-align:right; width:100%; margin-right:.5in;">
			<span class="pageNumber"></span><span>/</span><span class="totalPages"></span>
		</div>';

The last issue I see is an extra line at the bottom just before the footer. This was there before I added the footerTemplate and is still there now. It is not a big issue for me but it probably shouldn't be there and it may be a problem for other customers. Below is a screen grab of the output:

KoolReport's Forum

Page Headers in CloudExport PDF #927

Build Your Excellent Data Report