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

问题描述

我一直在寻找这个答案，但找不到任何可以正常工作的东西.我有这两个想法在很长一段时间内似乎根本不起作用:

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. 使用 @page 和 bottom-right 的方法.链接

一种使用固定页脚的方法.(据说在 Firefox 中工作)链接

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

还有什么办法吗?

推荐答案

经过一段时间的研究，我想我在这里得到了一些东西，仍然需要在不同的浏览器中进行一些测试，也许还需要一些完善.目前，我已经测试过，似乎在 Chrome 中运行良好.

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.

基本上，将这两种技术中的一点点混合在一起，我能够创建这个想法，为工作中的每个 p 复制(加载时)一个 h3(就这样它对每一页都足够运行).他们有 position: absolute 并且每一个都减去 100vh 所以他们去到另一页的底部.

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.

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

这是一个能够显示页面总数的新版本:JSFiddle - With Page总计

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

希望这有一些用处！

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