相关疑难解决方法(0)
带有CSS/HTML的页码
一个有趣的用例已经出现在我们面前,我们要求当我们打印一个网站时,打印的副本将有一个页面页眉和页脚,页脚内部有页码.
任何人都知道如何实现这一目标？
注意:浏览器版本可以是最新的,客户端是其他Web开发人员.
推荐指数
解决办法
查看次数
浏览器支持CSS页码
所以我知道这个选项:带有CSS/HTML的页码.
到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本？
我试过制作一个空白的html文件,并在头部添加两个样式标签:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方？通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.
推荐指数
解决办法
查看次数
在复制纸张交互的Web应用程序的CSS上使用cm/mm是一个好习惯吗？
我正在构建一个与文档交互以便以后打印的Web应用程序.在某些方面类似于Google Docs.我正在考虑在我的文档页面的CSS上使用cm/mm,因为它将帮助我生成文档.例:
// A4 size
.page {
width: 210mm;
height: 297mm;
margin: 2cm 5cm;
}
<div class="page">
...
</div>
遵循这种方法的主要问题是什么？
推荐指数
解决办法
查看次数
如何在新Chrome中打印html时打印页码？
在Chrome版本52.0.2743.116 m(64位)中打印html时,我需要打印页码.但是我还没有找到答案.
我已经尝试过了:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
这根本不起作用.
然后我发现了这个问答:
对于这个答案,我们不使用@page,这是一个纯CSS答案,但在FireFox 20+版本中工作.这是一个例子的链接.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>
不幸的是,这仅适用于FireFox 20+版本和Chrome版本35.0.1916.153
降级不是一个答案.你能帮我吗？
推荐指数
解决办法
查看次数
CSS @page不会在@ top-center,@ bottom-right等中显示内容
我正在尝试生成一个可打印的HTML文件,因此开始使用CSS @page及其周围的所有内容.我面临的一个大问题是我无法使用@ bottom-right和所有类似的解决方案来显示页码.你知道它背后是否有一般的原因(比如它已被弃用等),因为我已经测试了最简单的解决方案,如:
@page {
@bottom-right {
content: counter(page);
}
}
并且似乎仍然没有显示分页或任何其他内容.
推荐指数
解决办法
查看次数
使用CSS为每个打印页面添加边框？
是否有可能在CSS或js中模拟打印媒体中的以下格式(例如,显示每个页面的边框,页面编号和角落中的一些文本,内容很好地分割 - 而不是切成两半)？
我一直在使用page-break-after分割内容,但没有找到一种方法来为每个页面添加这种边框/页码.这只需要在WebKit中工作.
有关详细信息,我这样做的原因是我使用wkhtml将HTML文档打印为PDF.
推荐指数
解决办法
查看次数
@media print的CSS页面x
我会先说这个问题,我之前已经问过这个问题,但我能找到的所有答案似乎都引用了一个不再有效的过时解决方案(至少在Firefox 56 [64位]中)
过时的方法是曾经有一个自动实例化的CSS计数器命名pages,所以从这个SASS生成一小段CSS:
footer {
position: fixed;
bottom: 0;
left: 20px;
&:after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
}
}
习惯做我想做的事.现在它显示"Page [x]为0".
我已经尝试使用这个CSS来重新创建我自己的max-page计数器:
@page {
counter-increment: maxpage;
}
但是,当在我的页脚中使用时,这也会返回0.
是否有任何合理的跨浏览器友好方式来获得此功能？
推荐指数
解决办法
查看次数
css：在 Chrome 中对打印的页面进行编号
我必须支持的浏览器是 Chrome（在我的项目中使用电子），因此不能选择使用任何其他浏览器。
我已经寻找这个问题的解决方案有一段时间了，它似乎没有答案。我尝试过使用这种形式的方法（从@media print 的 CSS 页面 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/tfootchrome 在打印预览的每个打印页面上重复，但它不会导致任何计数器增量。在每个打印页上打印相同的计数器值。
我也尝试过涉及 的方法@page，但这似乎在几年前就停止工作了。
示例（从浏览器支持 CSS 页码复制）：
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
有谁知道这个问题的解决方法？还是我死在水里了？欢迎任何 javasript/nodejs 解决方案。
推荐指数
解决办法
查看次数
HTML - 如何使用 thead/tfoot 打印页码
我尝试在 HTML 报告中使用 counter(page) 但没有成功。我读了很多关于这个主题的 StackOverflow 页面，但我从未找到有效的解决方案！
环境
- Chrome（最新版本：70.0.3538.110）
- 火狐浏览器（最新版本：63.0.3）
工作流程
- 将代码复制到 HTML 页面中
- 使用 Chrome/Firefox 打开它
- 打印它
- 在预览中，数字未正确计算
问题 ？
- 你有关于这个主题的解决方案吗（如果可能的话，只使用 HTML/CSS）？
- 2018年主流浏览器不支持当前CSS3标准？
- 也许 thead / pageBreak 组合没有得到完美支持？
谢谢 ！
PS：请发布整个解决方案（而不是部分 HTML/CSS 代码）！
我的 HTML 演示
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML CSS Page counter</title>
<style>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
@media print{
@page {
size: A4 portrait;
}
.pageBreak {
page-break-before: always;
}
span.page-number:after {
content: "Page " counter(page); …推荐指数
解决办法
查看次数
打印时是否可以在Chrome中使用CSS3 / 2添加页码？
我相信我已经测试了StackOverflow上所有可用的解决方案，但都没有在Chrome（72）中运行。我在W3C上遵循了规范，但一切似乎只能在FireFox中工作。
我只想做一个简单的事情-使用反增量将页码添加到打印的文档中。我尝试了HTML4和HTML5，但没有任何结果。
有什么解决办法吗？
Chrome版本：72.0.3626.81（官方内部版本）（64位）
解决方案在FireFox中运行良好：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
另一种解决方案（HTML5不支持@page）：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40
相似的线程（旧的，Chrome没有分辨率）：
推荐指数
解决办法
查看次数
如何在@media print中使用页码进行打印？
我已经寻找这个答案有一段时间了，但找不到任何可以正常工作的东西。我有这两个想法，看起来在很长一段时间内根本行不通：
还有其他办法吗？
推荐指数
解决办法
查看次数
如何在打印时在Xpages应用程序的标题处添加顺序页码
我通过Lotus designer 9构建了一个Xpage应用程序.我有一个CSS标题,在打印时打印在每个页面.我想在这种格式的标题中添加每页的页码(即第1页,共6页)可以任何一个指南吗？
推荐指数
解决办法
查看次数
标签 统计
css ×12
html ×10
printing ×7
javascript ×1
jquery ×1
node.js ×1
pagination ×1
w3c ×1
wkhtmltopdf ×1
xpages ×1