如何在@media print中打印页码？ [英] How to print with page numbers in @media print?

问题描述

我现在一直在寻找这个答案，并且找不到任何可以正常工作的东西。我有这样的两种想法在一段时间内根本无法工作：

1. 使用 @page 与右下角。 链接

使用固定页脚的方法。


2. （据说在Firefox中工作）链接

有没有其他的方法？

解决方案

这里仍然需要在不同的浏览器中进行一些测试，并且可能有些完美。现在，我已经测试过，并且似乎在Chrome中运行良好。

基本上，通过两种技术的融合，我可以创建这个复制的想法在工作中为每个 p 加载一个 h3 （只要它对每个页面运行足够）。他们有 position：absolute ，并且每一个都减去 100vh ，所以他们进入另一页的底部。

这里是： JSFiddle - 没有页面总数

编辑

以下是一个可以显示页面总数的新版本： JSFiddle - With Page Total

有一些用途！

I have been seeking this answer for a while now and wasn't able to find anything that could work properly. I had these two ideas that kind of look like weren't working at all for quite sometime:

1. A method using @page with bottom-right. Link

2. A method using fixed footer. (Said to work in Firefox) Link

Is there any other way?

解决方案

After a while doing some research I think I got something cooking here which still needs some testing in different browsers, and maybe some perfectioning. For now, I've tested and seems to be working fine in Chrome.

Basically, blending in a little of both techniques I was able to create this idea that replicates (on load) a h3 for each p in the work (just so it runs enough for each page). They have position: absolute and each one subtracts 100vh so they go to the bottom of the other page.

Here it is: JSFiddle - Without Page Total

EDIT

Here's a new version capable of showing the page total: JSFiddle - With Page Total

Hope this has some use!

这篇关于如何在@media print中打印页码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！