javascript - css:在 Chrome 中为打印页面编号
问题描述
我必须支持的浏览器是 Chrome(在我的项目中使用电子),因此不能选择使用任何其他浏览器。
我一直在寻找这个问题的解决方案,但似乎没有答案。我尝试过使用这种形式的方法(从@media print 的 CSS page x of y复制):
CSS是:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTML代码是:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
上述方法适用于 FF,但不适用于 Chrome。在打印预览的每个打印页面上似乎thead/tfoot
都有 chrome 重复,但它不会导致任何计数器增量。每个打印页面上都打印相同的计数器值。
我也尝试了涉及的方法@page
,但这似乎在几年前停止工作。
示例(从Browser Support for CSS Page Numbers复制):
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
有谁知道这个问题的解决方法?还是我死在水里?欢迎任何 javasript/nodejs 解决方案。
解决方案
如果您希望在 Chrome/Chromium 下打印时添加页码,一种简单的解决方案是使用Paged.js。
这个 JS 库获取您的 HTML/CSS 并将其切割成页面,准备好作为一本书打印,您将在浏览器中进行预览。它使@page
大多数 CSS3 规范适用于 Chrome。
解决方案,如果您可以将视图切割成页面,准备打印
只需将他们的 CDN 添加head
到您页面的标签中:
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
然后,您可以使用自动计数器添加页码page
。例子 :
HTML 放在任何你想显示当前页码的地方:
<div class="page-number"></div>
CSS 使数字出现在 div 中:
.page-number{
content: counter(page)
}
该库还允许轻松管理页边距、页脚、页眉等。
如果您只想在打印时显示数字(和分页符)的解决方案
在这种情况下,您只需要在打印文档时应用 Paged.js CDN。我能想到的一种方法是将print me
触发 Javascript 的按钮添加到:
- 将 CDN 添加到页面
- 然后执行
window.print();
启动导航器的打印提示
推荐阅读
- javascript - 无法修复“Uncaught TypeError: Cannot read property 'remove' of undefined”——我咨询过其他答案
- vscode-remote - Azure 机器学习扩展通过我的 vs 代码客户端安装在我的远程计算机上
- https - 渗透测试发现 - JWT 使用 Base64 编码
- python - Leetcode 494题Target Sum的动态规划部分很难理解
- r - 相关图数组
- elasticsearch - 有效期文件的功能评分
- multithreading - 匿名线程中的 inline var 导致内存泄漏
- mysql - 如何使用 mysql 在 select 上应用条件值
- moodle - 安装 Moodle v3.8 时卡在系统屏幕
- pgm - 使用 Pyro 实现图形模型的问题