如何通过CSS设置打印页面

在这个无纸化的时代里,打印似乎是离我们越来越遥远的事情了(对!我只会写冷门和偏门的东西!),当然我们也不能因此忽略掉这部分用户的需求。像是预订的订单,产品的规格书这些,多少还是有打印需求的。而且如果页面有做过打印适配的话,用户(虽然可能只有1%)也会很高兴啦 XD

打印页面的样式可用通过 media query 设置,在 css 文件中增加@media print{ ... },并在里面书写样式就可以了,缺省的部分会按照默认情况下的样式进行输出(使用 RWD 的小伙伴务必要注意)。

基本设置

header、footer、nav 还有 sidebar 是不需要的,display:none就好。多媒体元素如果没有非常的必要,大都也可以隐藏,如果需要展示,可以为图片设置宽度(或者max-width: 100%),以防图片占据过多空间(以及浪费太多墨水233),视频则可以考虑适当替换成图片或文字。

尺寸及文字设置

事实上 W3C 针对打印媒体制定了一套标准,规定了类似于 Box Model 的 Page Model,并将 page 周围划分为 16 个区域(也就是页眉、页脚、订口、切口),支持分别定义尺寸样式内容。然而草案推出到现在整整两年,这个草案中的内容也只有@page支持程度稍广,没有办法修改具体每个区域的内容(摊手)。

  • 顺带一提,草案中有@page:first这样的写法,可以为第一页单独设置边距。

话又说回来,chrome 也可以自定义边距,总之打印在这块确实是有点乱乱的。

文字部分的话,建议以 pt 为单位设置,不过普通的 px 也没有问题 XDD 按照印刷的习惯,12 pt(px 也可以,下同)是普通内文的字号,标题 16 pt、18 pt 到 24 pt 都可以,如果不知道怎么办,可以在 PS 里按照 72 dpi 新建一个 A4 画面,然后把字排进去就 OK。

特殊设置

虽然是打印页面,但原来网页中的 DOM 结构还是不会变的,如果你想要修改 DOM 结构或者其他啥的,要么是直接修改源码,要么就是在页面加载完成之后用 JS 修改。像是原本白色的图片,要换成黑色的,还有原本在页面中浮动或绝对定位的元素,也要摆放到正确的位置上(position:static;float:none;可以清除定位和浮动设置)。左右并置的内容,根据需要看是否改成上下排列,人在纸张上的阅读习惯可是跟网页上有大不同。

另外一个需要注意的点是超链接,在网页上,我们随便点击一下超链接就可以了,但是拿着打印出来的纸的人要怎么办!!戳纸吗!!一般来说这样写就好

1
2
3
4
5
a:after{
content: '(' attr(href) ')';
word-break: break-all;
/* 顺手再写点别的样式也没关系,但是要注意黑白打印嗯… */
}

但是像我们的网站,用的是牛逼烘烘的 JS 跳转…这个时候就只好用自定义属性data-*来挽救一下,用 JS 把原本的href属性值拿出来并提取地址,写到data-href里,然后在 CSS 中,调用 data-href 而非 href 的值就好(关于content属性的取值问题,可以参考我之前的另一篇文)。

再剩下的,就是有些人会在打印页面里加入感谢信息,或者只有在打印页面中可见的信息,这都是根据需要来啦。

BTW:浏览器默认会在页眉页脚加入页面标题,张数信息以及所打印页面网址等信息,大概这也是浏览器不让我们修改页眉页脚信息的主要原因。当然如果你把页面的边距设为0,浏览器也不会强行插入的…


再仔细思考了一下感觉确实也蛮简单的样子,反正浏览器都有打印预览,所以其实并不担心会出现什么特别奇葩的情况,print 的情况一般也是唯一的,在 CSS 中狂用 !important 也不会怎样…总之就是一切还好还好 XDD

最后。我想。推荐一下… prrint style sheet这款 css,如果你懒得为自己的网站写 print 样式,那么直接拿来用也不错(不要在我的博客上用打印预览,我根本没做打印样式 XDDD

本部落格采用DISQUS评论系统,如果您无法见到留言框,可前往我的GitHub微博提Issue(留言)。
为您带来了不便我也很尴尬╮(╯_╰)╭