我们出现了一个有趣的用例,我们要求当我们打印网站时,打印的副本将有页眉和页脚,并在页脚内有页码。
有人知道如何实现这一目标吗?
注意:浏览器版本可以是最新的,客户是其他网络开发人员。
取决于您所需的浏览器支持。
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
进一步阅读:
现在到了 2024 年,它可以与作为 polyfill 的 pagedjs 一起使用
样品在这里
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
pagedjs sample - more complex at raisercostin.org/resume
</title>
<script src="https://unpkg.com/[email protected]/dist/paged.polyfill.js"></script>
<style type="text/css">
@page {
size: A7 portrait;
margin: 100px;
border: solid 1px blue;
@top-left {
content: "top left text";
border: solid 1px red;
}
@bottom-right {
content: "bottom right text";
border: solid 1px green;
}
}
</style>
</head>
<body>
content
</body>
</html>