CSS 打印

Posted 2023-04-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 打印相关的知识，希望对你有一定的参考价值。

参考技术A

2017-01-31

本文主要讲解如何使用 CSS 控制打印样式。

使用 CSS 可以控制文档如何正确的显示在不同的媒介 (Media) 上。其中分页媒介 (Paged Media) ，不同于连续媒介 (Continuous Media)，它可以控制文档内容，将其分隔至一个或多个不相关联的页面 (如：书、幻灯片)。

页面 (Page Sheet) 是物理介质 (如：纸张) 的表面，它包含可打印区域 (Printable Areas) 和不可打印区域 (Non-printable Areas)。用户代理可以调整文档内容的格式，使其显示在可打印区域。

页面盒子 (Page Box) 是一个由长边 (Long Edge) 和短边 (Short Edge) 组成的矩形。长边的方向决定了页面朝向 (Page Orientation)，长边是垂直方向，则页面朝向为纵向 (Portrait Orientation)，反之为横向 (Landscape Orientation)。

CSS 打印无法指定文档是否为双面打印 (Duplex Printing)，是否双面打印应该通过用户代理指定。不管是否双面打印，CSS 打印总是包含左页和右页 (分别通过 :left , :right 指定) 。（或者说 CSS 打印假定所有文档是双面打印）

和 CSS 盒子模型一样，页面盒子模型由外边距 (margin)、边框 (border)、内边距 (padding) 和内容区域 (content area) 构成。

其中内容区域和外边距有着特殊的功能：

页面进度 (Page Progression)方向是文档被分隔后的页面的排列方向。比如：现代中文页面进度多是从左至右；而古代中文的页面进度则相反。可以通过设置根元素 (root element) 的 direction 和 writing-mode 属性来改变页面进度。

页面的“第一页”是左页还是右页，可以由页面进度的方向决定，当页面进度方向为从左至右时，第一页是右页；反之为左页。（事实上也可以通过设置根元素的 break-before 属性来强制改变第一页是左页还是右页）

在 CSS 中使用 @media print

在 CSS 中使用 @import

在 html 中使用 <link> 标签

在 @media print 或 my-print-style.css 中，可以自由的修改大部分样式。

使用打印媒介查询可以自定义很多样式，当希望改变页面大小、边距等，就需要用到 @page 了。页面上下文 (Page Context) 中仅支持部分 CSS 属性，支持的属性有： margin 、 size 、 marks 、 bleed 以及页面外边距盒子等，不支持的属性将会被忽略。

注：常见浏览器都不支持该属性，推荐使用 Prince

页面的外边距被分成了 16 个页面外边距盒子。每个外边距盒子都有自己的外边距、边框、内边距和内容区域。页面外边距盒子用于创建页眉和页脚，页眉和页脚是页面的一部分，用于补充信息，如页码或标题。

页面外边距盒子需要在 @page 下使用，使用起来和伪类类似，也包含 content 属性。

margin 系列属性（ margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin ）用于指定页面外边距大小。

在 CSS2.1 中，页面上下文中只支持 margin 系列属性。而且因为 CSS2.1 的页面上下文中没有字体的概念， margin 系列属性的值的单位不支持 em 和 ex 。

size 属性支持 auto 、 landscape 、 portrait 、 <length>1,2 和 <page-size> 。

页面上下文也支持使用伪类，其中支持的伪类有： :left 、 :right 、 :first 和 :blank 。

需要双面打印时，通常需要将左页和右页设置不同的样式（如页边距、页码位置）。这时左页和右页可以分别用 :left 和 :right 表示。再次强调， 通过 :left 和 :right 设置左右页面不同样式，并不代表用户代理会将页面双面打印

伪类 :first 用于匹配到文档的第一页。

伪类 :blank 用于匹配文档的空白页。

注意，空白页既可能是左页，又可能是右页，设置左页或右页的样式也会显示在空白页上，如果不希望显示在空白页上，可以清除这些样式。

用于控制元素之前、之后或之中是否分页， 没有生成盒子的块元素不会生效 。

page-break-before 、 page-break-after 属性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。

page-break-inside 属性仅支持 auto 和 avoid ，表示在元素内允许或禁止分页。

orphans 和 windows 用于指定在页面的底部或顶部，元素中允许剩余的最少行数，默认为 2 行。

示例：

https://lon.im/post/css-print.html

参考链接：

打印/预览忽略我的 Print.css

【中文标题】打印/预览忽略我的 Print.css【英文标题】：Print/Preview Ignoring my Print.css 【发布时间】：2011-11-28 14:14:17 【问题描述】：

我有一个问题让我有些头疼。我正在尝试打印报告并使用 print.css 正确格式化它，但它每次都完全忽略我的 css。以前有人遇到过这个问题吗？我确保 CSS 文件位于正确的目录等中，但仍然没有运气。

这是我的模板：

注意：我使用 javascript 来控制打印按钮，并且在 javascript 中包含了 CSS 链接。我也试过把它放在 HTML 页面上，但没有帮助。

...
<script type="text/javascript">

function printContent(id)

   str=document.getElementById(id).innerHTML
   newwin=window.open('','printwin','left=100,top=100,'+
                         'width=900,height=400, scrollbars=1')
   newwin.document.write('<HTML>\n<HEAD>\n')
   newwin.document.write('<TITLE>Print Page</TITLE>\n')
   newwin.document.write('<link rel="stylesheet" type="text/css" '+
                         'href="/media/css/print.css" media="print"/>\n')
   newwin.document.write('<script>\n')
   ...

现在对于这个项目，我使用的是 Ubuntu 10.10 和 Firefox 7。如果这有帮助的话。

编辑

我为 Firefox 安装了 Web 开发人员工具栏。它允许您将页面视为不同的媒体。现在，当我单击打印时，它会显示我所有的样式更改，但是当我打印时，它不会跟随它们。

【问题讨论】：

CSS 中有什么？换句话说，究竟是什么让你认为你的风格被忽视了？我之所以这么问，是因为浏览器对打印样式表的支持真的很糟糕，而且有很多本来应该可以工作的东西根本不起作用。你试过省略media="print"吗？由于该窗口专门用于打印，因此我认为不需要将电子表格附加到特定的媒体类型。 @Pointy 样式表的标题、hr 样式元素等有不同的字体大小。检查我上面的 edit @SurrealDreams 我也试过省略 media="print" 但没有这样的运气你为什么要动态放入css？我认为这会给您带来问题，因为打印时不会执行 javascript。 【参考方案1】：

<html>
    <head>
        <title>your website title</title>
        <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
        <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
    </head>
    <body>
        <input type="button" value="Print" onClick="javascript:window.print();" />
    </body>
</html>

也许你可能想试试上面的 HTML 模板，看看它是否适合你或适合你的需要。

在我看来，您提议的函数实际上最好用 javascript 在服务器端而不是客户端编写，因为您正试图在其中动态生成 html 页面。您可以将该页面输出为 print.html 或其他内容，一旦将其发送到客户端，您就可以应用 print.css 样式并进行打印。无论如何，这里只是一些想法，希望它对您的情况有所帮助。干杯。

【讨论】：

【参考方案2】：

不确定这是否有帮助，但 @media print 应该在打印作业期间封装所有样式。

<style type="text/css">
    @media print
        /* Make the HR tag have 50 px spacing above and below */
        hr padding: 50px 0px; 
    
</style>

这是 SUPPOSED 处理这种类型的样式。脚本仍然可以负责包含 css 文件，但 @media print 会告诉嵌入其中的所有样式仅适用于打印作业。

【讨论】：

我确定你的意思是不是

以上是关于CSS 打印的主要内容，如果未能解决你的问题，请参考以下文章

CSS打印样式。需要让水印背景重复打印，水印图片要怎么设置才能打印出来？

CSS 打印，仅在第一页宽度 css 上的标题

如何使用 CSS 隐藏图像按钮不打印？ [复制]

在 CSS 或 JavaScript 中检测打印机的页面大小

修复了打印 CSS 中的背景

JS打印 - CSS文本颜色不显示