用户投稿今天要来介绍一个比较不常用的东西，那就是 CSS 中的列印，在以前常常会将网页列印出来，所以经常会使用到这个属性，时到今日，使用的时机越来越少，只有一些报表有用到，因此今天就让我们一起看看吧！
首先我们有一个画面，里面有三个区块，如下：
<body> <div class="page"> <div class="box red">red</div> </div> <div class="page"> <div class="box blue">blue</div> </div> <div class="page"> <div class="box green">green</div> </div></body>* { padding: 0; margin: 0;}.box { display: flex; justify-content: center; align-items: center; font-size: 100px; height: 600px;}.red { border: 10px solid #f66;}.blue { border: 10px solid #66f;}.green { border: 10px solid #6f6;}
列印方法
直接网页上右键列印（Ctrl+P）使用 javascript 的 window.print()如果想列印指定元素可以使用 javascript 另开分页后列印
// 例：这边只想列印 red 区块const content = document.querySelector(".red").innerHTML;const newPage = window.open("", "", "width=1000,height=500");newPage.document.write(content);newPage.print();或是使用可以接下来要介绍的 CSS 来控制
CSS 列印样式
首先我们先来看看目前列印出来的样式
是不是看到了一些问题呢？
其实列印的时候预设会有日期、网页标题、网址、页码，不过看起来有点丑，那么如何解决哩？这边就用到 CSS 的语法啰！
换页
首先处理换页的部分，这边介绍两个属性，可以在列印时达到换页的效果
.page { page-break-inside: avoid; /* 若顺着向下排列时会切开此元素，则直接换页 */ page-break-after: always; /* 碰到此元素会直接换页 */}
@page
再来则是页首页尾，在 CSS 内可以使用 @page 来设定基本的列印样式
size：设定列印的尺寸与方向，可依照纸张调整margin：设定每页边界与内容的距离，小于一定数值时，则会将预设的标题等盖过@page { size: portrait; /* 直向 */ size: landscape; /* 横向 */ size: A4; /* 纸张大小 */ size: A4 portrait; /* 混合使用 */ margin: 0; /* 边界与内容的距离 */}设定好之后页首页尾就乾净多了，如果想要上方有距离可自行设定 padding 或是 @page 内的 margin
页码
刚刚将预设的东西清掉后虽然乾净多了，不过如果还想留下页码怎么办！？这边提供一个製作页码的方法
CSS 中其实有预设可用的计数器，功能有三个，分别是初始化、增加、取用
body { counter-reset: page-number; /* 初始化，名字可自订，数值为0 */}.page { page-break-inside: avoid; position: relative; min-height: 100vh;}.page::after { content: counter(page-number); /* 取用该名字的计数器 */ counter-increment: page-number 1; /* 增加计数器数值 */ position: absolute; right: 0; bottom: 0; left: 0; font-size: 30px; text-align: center;}完成之后如下图
此方法是定位在 page 这个 class，若是 page 的高度太高的话就不适用了
@media print
我们完成页码之后发现，不是在列印时也有页码，而且因为刚刚加上了 height: 100vh，所以也不会正常的排列了
这时候就可以用到列印中最重要的东西了，也就是 @media print，他的概念跟 ＠media screen 一样，一个是萤幕的样式，而另一个则是列印的样式，已经会 RWD 的应该很好上手，那就让我们来修改一下刚刚的问题吧！
@media print { .page { page-break-inside: avoid; position: relative; min-height: 100vh; } .page::after { content: counter(page-number); counter-increment: page-number 1; position: absolute; right: 0; bottom: 0; left: 0; font-size: 30px; text-align: center; }}修改完成后就大功告成了，网页上的样式还是本来的样式，而列印时改成了三页，而且显示页码
结语
之前我也不是很认识列印的属性，刚好最近工作上用到才知道，基本上都跟 RWD 的概念一样，只是多了几个属性可以用，用起来还算容易，不过能看到自己做的东西照着想像的样子印出来还是相当疗癒阿！哈哈
微信扫一扫打赏
支付宝扫一扫打赏
