Html to PDF converting. Fixed footer on the bottom of the page

Question

I have an HTML file that I need to convert to PDF, for that, I'm using http://html2pdf.com/

I need to have the footer fixed at the bottom of the page, like on this screenshot.

But the HTML file content can be as short as well as long. So When the content is long, the PDF exports to several pages but the footer is visible only on the first page at the bottom and it gets over the content text like on this screenshot.

The code that I used is following:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: arial;
  padding-bottom: 100px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

<html>

<head>
  <title>Title</title>
</head>

<body style="position: relative;">
  <div class="gg" style="font-size:30px; color: #0d245d; font-weight: bold;">Title</div>
  <div class="gg" style="font-size:15px; color: #333;">
    Line 1 <br> Line 2 <br> Line 3 <br> Line 4
  </div>

  <div class="gg" style="font-size:18px; color: #333; margin-top: 40px; font-weight: bold;">SubTitle</div>

  <div class="gg" style="font-size:14px; color: #333;">Some Text<br /> Some Text Some Text Some Text Some Text Some Text<br />
    <br />
    <br /> Some Text<br />
    <br /> Some Text<br />
    <br />
    <br /> Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some
    Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br />
    <br /> Some Text<br />
    <br /> Some Text Some Text<br /> Some Text Some Text<br /> Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text<br /> Some Text Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br /> Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text<br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br /> Some Text Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br /> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text<br />
    <br />
  </div>

  <div class="footer" style="padding-top: 10px; border-top: 1px solid #ddd; font-size:13px; color: #333; margin-top: 20px; text-align: center;">Footer Text | <a style="color: #03c; text-decoration: none;" href="https://footer.example">Footer Text</a> | Footer Text</div>
</body>

</html>

Here I need to fix 2 issues

Have the footer at the bottom of every PDF page in case when the html content is long and PDF pages break to more than one
Fix the footer overriding issue on the content text (I've tried to give padding-bottom to the body but that didn't help)

Any ideas how to fix these issues? Thanks in advance

score 1 · Answer 1 · answered Feb 28 '18 at 13:22

You need to use datatable if you want to show table headings on every page.

To fix the footer

`#footer {
         position: absolute; 
         bottom:-100;
         right:0;
        /* margin-left: 500px;*/
        float: right;
    } `

    $(document).ready(function() {
    $('#table_id').DataTable({
    paging: false,
    "bSort" : false

    });
    } );

    #footer {
         position: absolute; 
         bottom:-100;
         right:0;
        /* margin-left: 500px;*/
        float: right;
    } 

.dataTables_info {
    display: none;
}

.dataTables_filter {
    display: none;
}
div#bottomproducts_filter {
    display: none;
}
table#middeltabl {
    margin-bottom: 15px;
}
div#bottomproducts_info {
    display: none;
}
    table th{
        border:1px solid !important;
            text-align: center
    }
        table td{
        border:1px solid !important;
            text-align: center
    }
        table td{
       /*color:#000;*/
       font-weight: 600;
    }
    .border_bottom_none{
        border-bottom: none !important;
    }    .border_top_none{
        border-top: none !important;
    }
    
    body {
  text-align: justify;
}

p{
  font-weight: 600;
}

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js">
    </script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
    </script>
    <div class="container">
<div class="row">
  <div class="left-addr col-sm-6" style="width:50%;float:left;">
<h3>This Is Heading</h3>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 170px;float: right;" alt="Drag or click to upload logo" title="Drag or click to upload logo" class="logo_display">
  </div>
  <div class="right-addr col-sm-6" style="width:50%;float:left;">
<h5 style="text-align: center;">This is too</h5>
<table class="top-right-tbl" width="100%" style="margin-bottom: 10px;">
  <tbody>
   <tr><th colspan="2">Invoice No</th></tr>
  <tr><th th colspan="2">78870</th></tr> 
  </tbody>
  <tbody>
     <tr><th>Order Date</th><th>Page</th></tr> 
  <tr><th>12-10-2018</th><th>1 of 1</th></tr> 
  </tbody>
   <tbody>
   <tr><th colspan="2">Order Number</th></tr>
  <tr><th th colspan="2">#23432</th></tr> 
  </tbody>

  </table>


  </div>
</div>
<div class="row">
 <div class="left-addr col-sm-6" style="width:50%;float:left;">
<h4>Bill To :</h4>
<p> 123 sterrt </br>
 city </br>
 state </br>
 country </br>
</p>
  </div>
   <div class="left-addr col-sm-6" style="width:50%;float:left;">
<h4>Ship To:</h4>
<p> 123 sterrt </br>
 city </br>
 state </br>
 country </br>
</p>
  </div>
  </div>
  <table id="table_id" class="display" cellspacing="0" width="100%">
    
        <thead>
         <tr>
                <th colspan="">Tabl head</th>
                <th colspan="">Tabl head </th>
                <th class="">Tabl head</th>
                <th class="">Tabl head</th>
                <th colspan="" class="">Tabl head</th>  
            </tr>
          </thead>
<tbody>
  <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
    <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
      <tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>

  </tr>
</tbody>
  </table>

            <tfoot id="footer">
     <tr>
      <th id="total" colspan="3" style="padding: 10px;border: none !important;" >Total Pieces :1</th>
     <th  colspan="2" style="padding: 10px; border: none !important;">Total Lines : 2</th>
      <th style="padding: 10px; border: none !important;">Total Weight :3</th>
    </tr>
   </tfoot>
    </table>
  </div>
    <div class="no-display"> <input class="heading-text-hidden" value="#000000" type="hidden"> <input class="body-text-hidden" value="#000000" type="hidden"> <input class="grid-headingbg-hidden" value="#ffffff" type="hidden"> </div>
<script type="text/javascript">window.print();</script>

Html to PDF converting. Fixed footer on the bottom of the page

1 Answers1