HTML 到 PDF 转换。固定页脚在页面底部-6ren

HTML 到 PDF 转换。固定页脚在页面底部

转载作者：行者123 更新时间：2023-11-28 15:46:26

我有一个 HTML 文件需要转换为 PDF，为此，我正在使用 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个问题

将页脚放在每个 PDF 页面的底部，以防 html 内容很长并且 PDF 页面分成多个页面
修复内容文本的页脚覆盖问题(我尝试为正文提供 padding-bottom 但没有帮助)

关于如何解决这些问题有什么想法吗？提前致谢

最佳答案

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

修复页脚

`#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 到 PDF 转换。固定页脚在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49029757/

文章推荐： javascript - Css3动态添加的元素没有得到动画

文章推荐： ios - 注册按钮点击功能

文章推荐： swift - 相等运算符重载未按预期工作

文章推荐： ios - 使用 http 从 URL 打开应用程序

pdf - 将多个 PDF 合并为一个 PDF
我的代码有一些问题。我正在尝试遍历包含许多 PDF 的 Drive 文件夹，然后将它们合并为一个文件。当我使用我的代码时，它只是为 Drive 文件夹中的最后一个 PDF 创建一个 PDF，而不是按预
pdf - PDF 规范中的最小 PDF 示例
我从 PDF Specification 获取了 PDF 规范中的最小 PDF 示例。，将其复制到记事本，将文件重命名为扩展名为 .pdf。我可以用其他 PDF 查看器(PDF-XChange、S
pdf - 在不破坏可访问性或 PDF 标签的情况下连接 PDF
感谢您在以下方面的帮助: 我有 2 个部分可访问的 PDF(包含标签)，我想使用一些命令行工具(如 PDFtk 或 Ghostscript，或任何 Perl 模块)将它们连接起来: 我已经尝试使用 P
pdf - Ghostscript - 将矢量 pdf 转换为光栅 pdf
我想使用 ghostscript 将矢量 pdf 转换为光栅 pdf(即光栅化矢量 pdf)。但是即使我添加了解析参数 -r300，我也找不到合适的参数来执行此操作。我使用的代码是-dSAFER -
pdf - iTextSharp 可以将 PDF 文档转换为 PDF/A
我无法在 FAQ 中找到这个功能是否存在于 API 中，尽管它在书中提到作为潜在可用的东西。有没有人有任何实现此功能的经验？最佳答案在 This thread (日期为 2007 年 6 月)Pa
pdf - 使用 pdf.js 在网站上显示 PDF
我要放文件sample.pdf在我的网站上，并希望使用 pdf.js 显示它.我想要的是显示我自己的文件，如 demo ，带有工具栏，放大/缩小等。到目前为止，我还不能这样做。我确实检查了 hell
pdf - 将 PDF 转换为 PDF/A-1
我知道这可能不是严格意义上的编程问题(也许是，我不知道)但我在尝试转换常规 pdf(带有超链接、书签、图像、嵌入字体等)时遇到了严重问题.) 转换为 PDF/A-1 格式。当我用 pdfaPilot
PDF.js 能够创建 pdf 文件或 PDF.js 只是一个让 PDF 文件显示在网络浏览器上的功能？
这是 PDF.js 网站 https://github.com/mozilla/pdf.js 我正在搜索和阅读很多文章，大多数编码都是将 pdf 导入 pdf.js 并在浏览器上显示，我不明白是不是
pdf-generation - 扫描图像/PDF 到可搜索图像/PDF
谁能建议我如何将扫描图像转换为可搜索图像或如何将扫描 pdf 转换为可搜索 pdf？很长一段时间以来，我一直陷入这种情况。我已经在 ubuntu 中尝试过 pdfocr 应用程序，但没有成功。最
pdf - Itext pdf 延迟签名导致 pdf 签名无效
作为我对客户端/服务器 pdf 签名研究的一部分，我测试了 itext pdf 延迟签名示例。不幸的是，我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。我的代码片段如下 cla
pdf - 在 PDF 中插入 PDF(不合并文件)
我想将一个 PDF 页面插入到另一个已缩放的 PDF 页面中。我想使用 iTextSharp 来实现此目的。我有一个矢量绘图，可以导出为单页 PDF 文件。我想将此文件添加到其他 PDF 文档的页面
pdf - Itext pdf 延迟签名导致 pdf 签名无效
作为我对客户端/服务器 pdf 签名研究的一部分，我测试了 itext pdf 延迟签名示例。不幸的是，我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。我的代码片段如下 cla
pdf - 裁剪基于文本的多页 PDF 文档的白边并将其转换为基于图像的 PDF 文档
我想为 Kindle 转换电子书。我尝试使用 Calibre 将具有复杂格式样式和图像的基于两种语言的基于文本的大型 PDF 电子书转换为适用于 Kindle 的 AZW3 电子书，并且还尝试了亚马逊
pdf - 如何仅使用 Adobe PDF 插件强制在谷歌浏览器中显示 PDF
我在 Google Chrome 中显示 pdf 时遇到问题。问题是 Chrome 将 pdf 的某些页面显示为黑色。启用 Chrome PDF 查看器时会发生这种情况。如果我禁用此插件并使用 Ad
pdf - 打印时将空白页插入 PDF
我确信这个问题无处不在，尽管我似乎找不到答案。我希望我的 PDF 文档在 PDF 阅读器中显示时没有空白页，但随后在封面后打印空白页，这样打印出来的文档在右侧甚至左侧都有奇数页。还有其他人遇到过这个问
pdf - 从命令行自动裁剪 pdf
我需要自动裁剪 pdf 文件(去除白边)。到目前为止，我尝试了两种并不完美的工具: pdf裁剪问题:它不会裁剪某些 pdf。 pdf-crop-margins 问题:有时它裁剪得太多(精细的细节)。
pdf - PDF 中的透明图像
This PDF由几个源文件组成。其中五个是包含 alpha channel 的 PNG。一种是没有 alpha channel 的 PNG。最后一 block 是带有透明效果的 Photoshop
pdf - 将内部维基页面转换为 PDF
我的团队将内部 wiki 页面用于各种内容。这些页面是使用 MediaWiki 创建的。我想知道是否有任何方法可以将 wiki 页面转换为 PDF 格式。我必须用它来将用户文档转换为 PDF 格式，以
pdf - 从结构化数据生成 PDF
我希望能够从我可能在数据库或 xml 或任何其他结构化形式中拥有的数据生成高度图形化(也包含大量文本内容)的 PDF 文件。目前，我们的平面设计师在将内容作为 MS Word 文档后，在 Photo
pdf - 查找重复的 PDF
我正在寻找可以帮助我找到重复 PDF 的实用程序。问题:我有 1000 个 PDF 文件。有些是重复的。由于不同的文件名和文件大小的微小差异，它们不容易被检测到。是否有实用程序/算法/库可以帮助我找到

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 到 PDF 转换。固定页脚在页面底部