How to separate body content with fixed header and footer for multiple pages

Question

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.

I don't know why people voting to close this question, can you please comment also ? — Drone, Jun 29 '16 at 09:46
I am using laravel's dompdf , btw I mention in first line that `to create pdf`, If you could help please can you provide solution(`css`) for this with [html](http://stackoverflow.com/questions/38027411/footer-is-not-working-in-page-break-as-expected-in-pdf-generating) on online pdf converter http://pdfcrowd.com/#convert_by_input+with_options — Drone, Jun 29 '16 at 09:57
suggest you to use tcpdf html2pdf instead of these online tools.. — Gaurav Aggarwal, Jun 29 '16 at 09:59
I am using laravel's dompdf just using that online url to check and tell my problem. — Drone, Jun 29 '16 at 10:04
Did you try the page-break-before and page-break-after CSS Rules? And add a fixed header and footer like mentioned here: http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w — Kjell, Aug 04 '16 at 07:35
Have you tried the solution as mentioned in [this](http://stackoverflow.com/questions/7484318/header-in-pdf-page-using-dompdf-in-php/7489564#7489564) post? http://stackoverflow.com/questions/7484318/header-in-pdf-page-using-dompdf-in-php/7489564#7489564 — d.coder, Aug 04 '16 at 07:39

TheThirdMan · Answer 1 · 2016-08-08T12:33:10.767

11

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>

edited Aug 08 '16 at 12:33

answered Aug 04 '16 at 08:05

TheThirdMan

1,482
1
14
27

Can you please share an html example too, please ? – Drone Aug 08 '16 at 11:54
@Festo: The top example works without additional changes to the HTML markup - you add all the content via CSS. The bottom example simply requires a header and footer element, which can hold any elements they need to. I updated the answer to elaborate on both factors a little bit more. – TheThirdMan Aug 08 '16 at 12:34
I am sorry to say, With top css + html to generate pdf by `laravel dompdf` is not working, Neither header in each page nor footer :( – Drone Aug 08 '16 at 12:49
@Festo: If you say "top CSS and HTML", which code do you mean? The first part of my answer (everything above the horizontal line) **does not require any additional markup**, and unless you're trying to generate your CSS with a renderer that doesn't support page regions (such as a web browser), it should be rendered perfectly. If you need to generate the output with a browser (or want viewers to be able to), resort to the bottom solution (everything below the horizontal line). – TheThirdMan Aug 08 '16 at 13:14
I used both code 1. http://screencast.com/t/4MPlcOYy2J and 2. http://screencast.com/t/yjFkiNp3vNsA I am getting this output from both code : http://screencast.com/t/AkVbIEuRxUXO – Drone Aug 10 '16 at 07:02
The code from the first screenshot should work the way you have it set up. Are you sure you're viewing this in a viewer that sets the `print` media type? To test this, remove the `@media print {` and closing `}` elements; or you could tell your browser to render a print preview instead; this works in Firefox by entering `media emulate print` in the developer console. If it *doesn't* display correctly after that, you likely have other conflicting css, or dompdf is messing with the markup, destroying the style (unlikely). – TheThirdMan Aug 10 '16 at 07:48
I don't know what a bad luck I have : Now I am using this: http://screencast.com/t/EecyD023C9 and getting this as a output pdf : http://screencast.com/t/zCYJbCzzWOVT See header and footer in red color , It ignores first page. – Drone Aug 10 '16 at 11:37
Boss : With this code I am able to make pdf as I want : http://screencast.com/t/bFTGlTap2Je , Thanks for all your support – Drone Aug 10 '16 at 11:54
@Festo: Glad I could help! Also, please consider accepting this or another answer that has helped solve your problem by clicking the checkmark. This indicates to the wider community that you've found a solution, removes it from the unanswered queue and gives some reputation to both the answerer and yourself - though there is no obligation to do this. – TheThirdMan Aug 10 '16 at 12:13
It would be great if I could accept your answer, but my bad My problem is solved with the ans that I posted. But definitely you deserve +50 I will accept in the last – Drone Aug 10 '16 at 12:22
@Festo: I hadn't seen that - you did everything right then, you're supposed to mark the answer with what *actually* solved your problem! – TheThirdMan Aug 10 '16 at 12:24

Vishal Panara · Answer 2 · 2016-08-10T07:26:07.050

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 tried as you said Its ignore first page : http://content.screencast.com/users/Niklesh2/folders/Jing/media/7b046763-559a-4c58-a0ef-1717cff82ca3/2016-08-10_1219.png — Drone, Aug 10 '16 at 06:50
@Festo Can you please refer my updated answer? Hope it works...! — Vishal Panara, Aug 10 '16 at 07:00
Sir : With this code I am able to make pdf as I want : http://screencast.com/t/bFTGlTap2Je, Thanks for all your support — Drone, Aug 10 '16 at 11:53
FYI, You might want to add some page margins (`@page { margin: 120px 50px; }`), then place the header/footer into that space using negative positioning (`header { top: -100px; ... };`). If you don't you could wind up with the header/footer overlapping the content. — BrianS, Aug 10 '16 at 22:45

score 3 · Accepted Answer · edited May 23 '17 at 11:53

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 !!

score 0 · Answer 4 · answered Aug 11 '16 at 06:20

Basically, This type of application referred as Single Page Application

> Please use power of AngularJs in this type of requirement, it has strength of routing.

<html>

   <head>
      <title>Angular JS Views</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>

         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>

         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>

      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).

            when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).

            otherwise({
               redirectTo: '/addStudent'
            });
         }]);

         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });

         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });

      </script>

   </body>
</html>

Dear let me know if you are looking for some other alternative than this. — Biyu, Aug 11 '16 at 06:21
I don't understand, how can I generate pdf from your code, Can you please explain in detail, Fortunately I am using Angular with Laravel, It will be great If I can do it by angular. — Drone, Aug 11 '16 at 06:47

How to separate body content with fixed header and footer for multiple pages

4 Answers4

Basically, This type of application referred as Single Page Application