简单介绍一下前端打印的做法和一些问题一、简介 前端打印即浏览器打印，是通过浏览器的打印功能来实现打印效果的做法。
通过前端打印，可以实现的功能。
文章图片
image.png
二、基本打印 首先用最普通的方式实现一些前端打印。
print.vue：
预分拣单预分拣单：{{printData.crossDockingNo}}
总SKU数：{{printData.skuQty}}
总PCS数：{{printData.pcsQty}}生单时间：{{printData.createTime}}
打印时间：{{printData.printTime}}
- 商品编码：{{item.commodityCode}}
越库数量：{{item.crossQty}}品名：{{item.commodityName}}
规格：{{item.spec}}
单位：{{item.unit}}
门店编码
门店名称
门店库位
播种数量
{{ subItem.storeCode }}
{{ subItem.storeName }}
{{ subItem.collectionLocation}}
{{ subItem.matchQty }}
打印 @import url("./print.less");
print.less：
.print-box {
font-size: 12px;
padding: 2px;
@media print {
font-family: "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Roboto, Noto, sans-serif;
}.print-header {
text-align: center;
margin-top: 15px;
font-weight: bold;
}.top-line {
height: 10px;
border: none;
border-top: 10px groove;
margin-top: 12px;
margin-bottom: 12px;
}.table-top-box {
font-size: 18px;
}.flex-box {
display: flex;
.flex-2 {
flex: 2;
}
.flex-1 {
flex: 1;
}
}.printTable li {
margin-top: 20px;
.table-top-box {
margin-bottom: 10px;
}
}.bottom-line {
height: 1px;
border: none;
border-top: 3px groove;
/* solid */
margin-top: 12px;
margin-bottom: 12px;
}@border-color: #e1e1e1;
.printTable {
table {
text-align: center;
font-size: 12px;
border: 1px solid @border-color;
width: 100%;
th, td {
padding: 1px;
border-bottom: 1px solid @border-color;
border-right: 1px solid @border-color;
}th {
text-align: center;
&:last-child {
border-right: none;
}
}tr {
td:last-child {
border-right: none;
}&:last-child {
td {
border-bottom: none;
}
}
}
}
}.footer-center {
@media print {
display: none;
}
margin-top: 12px;
text-align: center;
}
}
打印预览：
三、功能设置 3.1 页面设置
文章图片
【前端打印】@page 规则用于指定打印页面的一些属性，包括纸张尺寸、方向、页边距、分页等特性。
@page :pseudo-class {
size: A4 landscape;
margin:2cm;
}
3.2 分页
page-break-before用于设置元素前面的分页行为,可取值:
page-break-after设置元素后的分页行为。取值与page-break-before一样。
- auto默认值。如果必要则在元素前插入分页符。
- always在元素前插入分页符。
- avoid避免在元素前插入分页符。
- left在元素之前足够的分页符，一直到一张空白的左页为止。
- right在元素之前足够的分页符，一直到一张空白的右页为止。
- inherit规定应该从父元素继承 page-break-before 属性的设置。
page-break-inside设置元素内部的分页行为。取值如下:
- auto默认。如果必要则在元素内部插入分页符。
- avoid避免在元素内部插入分页符。
- inherit规定应该从父元素继承 page-break-inside 属性的设置。
@media print {
section {page-break-before: always;
}
h1 {page-break-after: always;
}
p {page-break-inside: avoid;
}
}
3.3 分页保留行数
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。
@media print {
p {orphans:3;
widows:2;
}
}
3.4 显示背景色
打印默认不显示背景色，在 screen 下的设置是不起效果的。
可以通过设置改变。
@media print {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
四、其他
- 对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
- 需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
- 可以调用window.print()函数来打印当前页面。
- 分页打印或换页打印：page- break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。
作者：Johnson杰
链接：https://www.jianshu.com/p/d19d66ef8d7e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
