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

Question

I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.我知道这已经被多次问过，但这些解决方案都没有奏效，希望从那时起有人已经弄清楚了。

I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.我创建了一个 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>

This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,这是一个非常简化的示例，内容将是动态的，因此可能有多个页面，并且页脚中的图像会很大，

essentially i need the footer to look like this: https://i.stack.imgur.com/Wh9s0.png基本上我需要页脚看起来像这样： https://i.stack.imgur.com/Wh9s0.png

but only on the last printed page但仅在最后打印的页面上

any javascript or jquery solution is welcome欢迎任何 javascript 或 jquery 解决方案

Answer 1

You could essentialy generate two footers, one for your page content and one for printing.您基本上可以生成两个页脚，一个用于页面内容，一个用于打印。 Use CSS then for displaying:然后使用 CSS 进行显示：

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

Answer 2

I don't think there is an answer here.我认为这里没有答案。 If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a如果您想在每个页面上放置该图像，那么 Idan Cohen 在这里有一个很好的解决方案： https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

As to just the last page... not even the CSS 2 Spec.至于最后一页......甚至没有CSS 2 规范。 for Paged Media supports a :last page selector (but does for :first ).分页媒体支持:last页面选择器（但支持:first ）。 But even @page is unreliable as most browsers have scaled down support for things like page counters etc. (See @Page Browser Compatibility )但即使@page也不可靠，因为大多数浏览器已经缩减了对页面计数器等的支持。（参见@Page Browser Compatibility ）

Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.您最好的选择是探索妥协（每页上的图像，或内容末尾的图像 - 但不一定在页面底部）或探索通过 JavaScript 库完成工作的可能性即时生成 PDF 。

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

问题描述

2 个解决方案

解决方案1
0 2021-01-07 16:11:53

解决方案2
0 2021-01-07 22:11:42

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

问题描述

2 个解决方案

解决方案1 0 2021-01-07 16:11:53

解决方案2 0 2021-01-07 22:11:42

解决方案1
0 2021-01-07 16:11:53

解决方案2
0 2021-01-07 22:11:42