标签: css-paged-media
CSS 分页媒体：最后一页选择器
我需要知道是否可以使用:last选择器修改最后一页的内容。
我不确定它是否存在，我看到它被用在其他像这样的 stackoverflow 答案中：页脚在最后打印的页面上。但是我在文档中找不到它，当我尝试使用它时它不起作用。
我正在尝试清除最后一页页脚上的内容，如下所示：
@page {
@bottom-right {
content: "Please turn over";
}
}
@page :last {
@bottom-right {
content: none;
}
}
当我将它与:first选择器一起使用时它会起作用。我怎样才能得到最后一页的效果？
我正在使用 Weasyprint 打印 PDF 文件。
推荐指数
解决办法
查看次数
飞碟忽略反增量和反重置
我目前正在使用 Symfony2 for PHP 和 SpraedPDFGeneratorBundle，它使用 Flying Saucer 生成 PDF。
我需要让用户输入起始页码来打印带有页码的表单。如果我做一些简单的事情
@page {
counter-increment: page 5;
...
@top-right {
content: counter(page);
};
}
生成的 PDF 不会将每页增加 5。我这样做是为了测试功能，因为预期的代码是
@page {
...
@top-right {
content: counter(page);
};
}
@page:first {
counter-increment: page {{ startingPage-1 }}; /* The last part is Twig code for printing the starting page dynamically */
}
为什么会发生这种情况？
推荐指数
解决办法
查看次数
css3页面媒体无法在任何浏览器中运行
您好我已经使用CSS3页面媒体模块http://www.w3.org/TR/css-gcpm-3/直接从浏览器打印HTML内容到PDF,但我没有得到任何浏览器来处理它.我的工作如下.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media print {
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "sans-serif";
position: relative;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
@page {
size: letter;
margin: 20mm 25mm;
}
@page {
@top-center {
content: element(pageHeader);
}
}
@page {
@bottom-center {
content: element(pageFooter);
}
}
#pageHeader {
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
}
</style>
</head>
<body>
<div id="pageHeader">
<p>This is the Header shown on first page.</p> …推荐指数
解决办法
查看次数
仅在首页打印网站徽标（@media print）
我需要创建网站的打印版本，正如我在标题中提到的，我需要在第一页上显示网站徽标。例如，如果我打印主页，并且打印了 5 页，则徽标应仅显示在第一页上。
@media print 可以吗？
到目前为止我已经尝试过但不起作用
@media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
@page:first {
.header .logo { display:block }
}
推荐指数
解决办法
查看次数
在Google Chrome浏览器中打印表格时，内容与标题重叠
打印带有HTML代码的表格时，Google Chrome浏览器出现问题。我需要创建一个带有标题的文档，并且要实现此目的，我正在使用带有thead元素的表，因此浏览器将为打印文档的每个页面复制该文档。
问题是当<tr>元素内有分页符时，内容与标题重叠。跟着打印出问题，并给出要点。
iframe {
height: 400mm;
width: 300mm;
page-break-after: always;
}
.barcode {
font-family: 'c39hrp36dltt';
font-size: 4em;
}
.document {
width: 100%;
height: 100%;
page-break-after: always;
font-family: 'Arial';
}
.dont-break-inside {
page-break-inside: avoid;
}
.huge {
font-weight: 700;
font-size: 3em;
}
.title {
text-align: center;
background-color: #a9a9a9;
font-weight: 700;
padding: 5px;
}
.line {
border-bottom: solid 1px #727273;
margin-top: 25px;
width: 100%;
}
.center {
vertical-align: middle;
margin-left: 4cm;
}
.cover-infos {
width: 21cm;
border: 1px solid; …推荐指数
解决办法
查看次数
分页媒体模块是否已被放弃？
我按照本文中的步骤安排我的页面进行打印.但是,实际上只有几件事情可行.我无法选择像@top-centerChrome,Firefox或Opera 这样的选择器,尽管caniuse说它应该适用于大多数主流浏览器.
这已被悄然放弃或弃用？
我很确定这是正确的,但我会在这里发布我的CSS以供参考:
@page {
@bottom-right {
content: "...";
}
}
内容不会出现在任何地方.
推荐指数
解决办法
查看次数
使用CSS @Page渲染打印页面的大小
嗨,谢谢你的期待!
背景
我正在使用Rotativa PDF打印多页报告,该报告将PDF页面打印为PDF.在这样做时,我需要遵循CSS 2.1及更高版本的@page约定.
我的应用程序是在C#,MVC 3中.
问题/问题:
即使我在@page声明中指定8.5in乘11in,打印的PDF中的页面也只缩放到8.5X11工作表的75%左右.我知道这是因为我有一个应该覆盖整个页面的背景图像,但它只打印到整个页面的75%左右的PDF.内容也按比例缩小,所以一切都是按比例正确的,只是不应该整个8.5X11帧.
我在CSS中设置了这样的报告封面:
@page defaultPage{size:8.5in 11in;margin: 2cm;}
#CoverPage {
page: defaultPage;
background-image: url(/Resources/rendered_assets/img/cover_bg.jpg);
background-repeat:no-repeat;
width:8.5in;
height: 11in;
}
和HTML:
<div id="CoverPage">
<p>foo</p>
<p>bar</p>
</div>
知道我可能做错了什么吗？提前致谢.
推荐指数
解决办法
查看次数
CSS @page 中的不同大小：第一个结果整个@page 大小相同
它与打印有关，并且仅与打印有关。
CSS：
@page {
size: A4 portrait;
}
@page :first{
size: 210mm 1000mm;
}
根据 CSS 的定义，只有首页高度为 1000 毫米，其余页面高度为 297 毫米 (A4)。
但在 Chrome 中，从第二页开始，看起来像 297mm，但所有内容都消失了。
自己尝试一下，使用Google Chrome，打开http://fiddle.jshell.net/T4nnG/1/show/ 并尝试打印，看预览，第一页是正确的，从第二页开始，大小是正确的，但内容消失了
使用“另存为PDF”可以看得更清楚，但是如果你选择真正的打印机，它会缩小第一页，错误是相同的
它可能只能在 Chrome 中使用，但我只使用 Chrome 的应用程序，所以只要它能在 Chrome 中运行，我就很高兴。
我做错了什么吗？请提供正确CSS的建议，谢谢。
推荐指数
解决办法
查看次数
在分页媒体中运行页脚“元素（页脚）”仅出现在最后一页
我正在处理一个分页 css，在边距框中运行页脚。一切都几乎按预期工作，直到图形设计师要求我将页脚的一部分设为粗体，并且我无法再使用 content:"text" 作为页脚。
我决定使用 content:element(footer) 并且我在动态创建的 html 页面的末尾添加了页脚，但它只显示在最后一页。我已经搜索过，但每个人似乎都有相反的问题（他们只想要在最后一页上并在所有页面上都有）或者没有使用 CSS3 印刷媒体样式。
@page {
size: 170mm 240mm;
margin: 23.5mm 27.5mm 23mm;
@bottom-center {
content: element(footer);
font: normal 8pt MyLucida;
}
}
footer {position: running(footer);
font-family: MyLucida;
font-size: 8pt;}
HTML
<footer>
My Journal Issue [<b>000</b>] Month Year
</footer>
我期待在每一页上找到页脚，但空白页，但它只出现在最后一页，在框内的正确位置。将“位置：运行（页脚）”更改为“位置：绝对”没有任何改变。似乎页脚在最后只添加了一次，根本没有重复。我不得不重复这种风格，否则它就没有应用它。html 仅用于打印，它是从 db 数据生成的。我的 pdf 转换器是 PrinceXML。我希望这是有道理的！
推荐指数
解决办法
查看次数
如何在分页的HTML文档中强制使用空白页？
如何在HTML文档中强制使用空白页？我有一个标题页，之后是强制分页符（以下规则）。问题是剩余的内容直接出现在下一页上，我希望标题页面和剩余的内容被1个空白页面所分割（如下图所示）。
HTML：
<div class=title-page">
title
</div>
<div class="content">
blah blah
</div>
CSS：
.title-page {
page-break-after: always;
}
预期结果：
<div class=title-page">
title
</div>
<div class="content">
blah blah
</div>
我知道可以在标题页和其余内容之间插入一个空白，然后对其page-break-after: always;进行窥视。不过，插入空div在语义上不太正确。有没有办法仅使用CSS来达到相同的结果？
编辑：在这种情况下，也可以用完成page-break-after: left;，因为默认情况下第一页是左页。那么在文档中间的情况下，您无法确定所在页面是左还是右。或者，当您要插入1个以上的空白页面时。还能用CSS完成吗？
推荐指数
解决办法
查看次数
Javascript在不同的页面上打印多个div
我需要在 A4 纸上打印，每张纸都<div>从不同的页面开始
<div id="1">
//content
</div>
<div id="2">
//content
</div>
<div id="3">
//content
</div>
....例如，内容<div id="1">可能有 2 或 3 页，但<div id="2">仍需要从新页面开始。
推荐指数
解决办法
查看次数