Html到PDF转换。页面底部的固定页脚

时间：2018-02-28 12:36:09

标签： html css html-to-pdf

我有一个HTML文件，我需要转换为PDF，为此，我正在使用 http://html2pdf.com/

我需要将页脚固定在页面底部，就像在此屏幕截图中一样。 enter image description here

但HTML文件内容可以短得多。因此，当内容很长时，PDF会导出到多个页面，但页脚仅在底部的第一页上可见，并且它会覆盖此屏幕截图中的内容文本。 enter image description here

我使用的代码如下： 

<html>
<head>
    <title>Title</title>
    <style>
        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;
        }
    </style>

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

我需要解决2个问题

  1. 如果html内容很长且PDF页面突破到多个页面，请将页脚放在每个PDF页面的底部
  2. 修复内容文本上的页脚覆盖问题（我试图给身体填充底部，但这没有帮助）

    3. 如何解决这些问题？ 提前致谢

2 个答案:

答案 0 :(得分：0)

如果要在每个页面上显示表格标题，则需要使用数据表。

修复页脚

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

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

    });
    } );
＆＃13; 
    #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;
}
＆＃13; 
  <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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-3)

关心从HTML网页转储的PDF的设计是很奇怪的，但无论如何......

  1. 据我所知，这种行为适合您使用的网站管理其转换的方式，因此您应该设法只有短页，或者在页面太长时拆分页面。
  2. 要管理没有fixed属性的页脚，您可以查看此piece of code，这是非常好的和聪明的

    3. 我希望它会有所帮助。

相关问题
最新问题