Menu
I Have three separate section as header, body and footer to create pdf.
Header part will come always at top of each page and it will be fix.
______________________
| header |
|______________________|
Problem is with body content, if content is big it will go to second page.
______________________
| |
| |
| body |
| |
| |
|______________________|
Footer part will come always at bottom of each page and it will also fix.
______________________
| footer |
|______________________|
So If content is big and if two pages created then I should get two pages as:
______________________
| header |
|______________________|
| |
| |
| Body Part1 |
| |
| |
|______________________|
| footer |
|______________________|
And
______________________
| header |
|______________________|
| |
| |
| Body part2 |
| |
| |
|______________________|
| footer |
|______________________|
I tried with table format, It is working for header and content, but not worked for footer. Footer is coming only in bottom of second page not in first page.
I am using laravel dompdf
Any help would appreciated.
499
I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes. That being said, try using flexbox. Insert all of your html in main and flexbox will push footer to the bottom of the page.
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
HTML assumes a constant uninterrupted sequence of elements, while printed pages require to split that content into sections. The best an interpreter can do without you telling it otherwise is to seperate elements onto pages so that most of them fits on a single page.
This very exhaustive article on SmashingMagazine will tell you a lot about how to use CSS to design HTML for print.
Most importantly for your question, it will elaborate on @page regions on a tidy sheet. Relevant for you will likely be the top-center and bottom-center regions (which, unlike you might think looking at te document, may very well extend to the entire width of the document).
Using these regions, you can define header and footer via CSS, and even style them depending on the side of the fold they're on if you're designing a book. These work by adding content directly per CSS, so it doesn't require any markup in your HTML to work.
/* print a centered title on every page */
@top-center {
content: "Title";
color: #333;
text-align: center;
}
/* print the title on the left side for left-hand pages, and vice versa */
@page:left {
@top-left {
content: "Title";
color: #333;
}
}
@page:right {
@top-right {
content: "Title";
color: #333;
}
}
Though a non-issue for you since you're using laravel, no browser I've come accross will print those regions, so it won't be all that practical for regular print stylesheets.
While you can do a lot with CSS, you might have content that is too complex to create it in the above way. In this case, you can use an element with the position:fixed property, which will render on the top/bottom of every page, depending on how you style it - for example like this:
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
HTML:
<body>
<header>
above the content on screen, and on the top of every printed page
</header>
<main>
content that is flowing and behaving as you would expect it
</main>
<footer>
below the content on screen, and on the bottom of every printed page
</footer>
</body>
Try the below code in full view.
header{
height: 80px;
border:1px solid red;
position: fixed;
width: 100%;
top:0;
background-color: red;
}
.content{
border: 2px solid #000;
margin-top: 80px;
height: 100%;
width: 100%;
}
footer{
height: 80px;
border:1px solid red;
position: fixed;
bottom: 0;
width: 100%;
background-color: red;
}<body>
<header>
<h1>Header</h1>
</header>
<div class="content">
<h1>Content</h1>
<p>one Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<h1>Footer</h1>
</footer>
</body>I checked this helpful answer : https://stackoverflow.com/a/1763683/5830872 again and with some changes and external div tag Its working for me.
I don't Know how laravel dompdf converts this html to pdf but it works for me.
Here is my laravel code
Route::get('/', function () {
$output = '<style>';
$output .= '
.divFooter {position: fixed;bottom: 20;text-align:center;}
';
$output .= '</style>';
$output .= '<div class="divFooter" style="color:red;"><h1>This is footer</h1></div>';
$output .= '<table width="100%"><thead><tr><th><div style="color:red;"><h1>This is header</h1></div><th></tr></thead>';
$output .= '<tbody><tr><td>';
$output .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
.........................
.........................
.........................
';
$output .= '</tbody></table>';
$pdf = App::make('dompdf.wrapper');
$pdf->loadHTML($output);
return $pdf->stream();
});
Which generating pdf like this : http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png
I am sorry I am not able to tell you how its working. But may be helpful for others who is working in laravel dompdf.
cheers !!
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With