是否可以使用 Chrome 打印在最后一页的底部添加页脚？答案

【问题标题】：Is it possible to put a footer at the bottom of the last page using Chrome print?是否可以使用 Chrome 打印在最后一页的底部添加页脚？
【发布时间】：2021-01-07 15:55:51
【问题描述】：

我知道这个问题之前已经被问过很多次了，但是这些解决方案都没有奏效，希望从那时起有人已经解决了。

我创建了一个 HTML 页面，我将使用 Chrome 浏览器打印实用程序进行打印，我需要在最后一页的底部添加一个图像，问题是页面中的内容是动态的，所以大多数方法我看过的只是把图片放在内容结束的地方，而不是最后一页的底部。

<head>
    <title></title>
    <style> 
        #footer:before {
            display: block;
            content: "";
            margin-top: 100%;
        }
    </style>
</head>
<body>
    <div id="content">
    content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
    </div>
    <div id="footer">
        <img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
    </div> 
</body>

这是一个非常简化的例子，内容是动态的，所以可能有多个页面，并且页脚中的图像会很大，

基本上我需要页脚看起来像这样： https://i.stack.imgur.com/Wh9s0.png

但仅在最后打印的页面上

欢迎任何 javascript 或 jquery 解决方案

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您基本上可以生成两个页脚，一个用于页面内容，一个用于打印。然后使用 CSS 进行显示：

@media print {
   .content-footer {
      display: none;
   }
   .print-footer {
      display: block;
      //Always at the bottom
      position: absolute;
      bottom: 0;
   }
}

【讨论】：

我不认为这会解决定位问题
@O.M.N.L - 这会将页脚放置在第一个打印页面的底部。见jsfiddle.net/vinorodrigues/6gsrvue2/58

【解决方案2】：

我认为这里没有答案。如果您想在每个页面上放置该图像，那么 Idan Cohen 在这里有一个很好的解决方案：https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

至于最后一页...甚至 Paged Media 的 CSS 2 Spec. 都不支持 :last 页面选择器（但对于 :first 支持）。但即使@page 也不可靠，因为大多数浏览器已经缩减了对页面计数器等的支持（参见@Page Browser Compatibility）

您最好的选择是探索折衷方案（每个页面上的图像，或内容末尾的图像 - 但不一定在页面底部） 或探索通过动态生成 PDF 的 JavaScript 库完成工作的可能性。

【讨论】：