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

【问题标题】：Html to PDF converting. Fixed footer on the bottom of the pageHtml 到 PDF 的转换。固定页面底部的页脚
【发布时间】：2018-02-28 12:36:08
【问题描述】：

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

我需要将页脚固定在页面底部，就像这个屏幕截图一样。

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

我使用的代码如下：

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>

这里我需要解决 2 个问题

  1. 在每个 PDF 页面的底部添加页脚，以防 html 内容很长并且 PDF 页面分成多个页面
  2. 修复内容文本的页脚覆盖问题（我尝试将 padding-bottom 赋予正文，但没有帮助）

任何想法如何解决这些问题？ 提前致谢

【问题讨论】：

    标签： html css html-to-pdf


    【解决方案1】：

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

    固定页脚

    `#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>

    【讨论】：

      【解决方案2】：

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

      1. 据我所知，这种行为适合您所使用的网站管理其转化的方式，因此您应该设法只拥有短页面，或者在页面太长时拆分页面。
      2. 要在没有fixed 属性的情况下管理页脚，您可以看看这个piece of code，它非常漂亮和智能

      我希望它会有所帮助。

      【讨论】：

      • 1.不幸的是，我不能只有短页或拆分它们。无论内容长度如何，我都需要一个文件，并将页脚固定到每一页 2。 position: absolute 变体没有帮助，因为它不能解决我的问题，它会在最后一页的文本之后获取页脚，而不是在每一页上所以不幸的是，你的回答没有提到我的问题，也没有帮助
      • 在商业世界中，B2B 网站、文档处理、表单处理、根据网页请求创建的 PDF 比您想象的要普遍得多。
      猜你喜欢
      • 2013-09-25
      • 2022-01-10
      • 2013-01-24
      • 1970-01-01
      • 2016-12-18
      • 2019-05-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode