htmlcss打印样式
最近做公司后台系统，需要打印贴箱标签，按照正常打印A4纸的标准，测试的效果不是⾃⼰想要的，⽂字排版布局都乱了，查了⼀些资料，需要设置的东西我总结了⼀下：
显⽰器(screen)和打印机(printer)是两种差别很⼤的设备，所以要设置html/css打印样式。 screen⼀般使⽤逻辑单位⽐如px，⽽打印机则应该使⽤物理单位⽐如cm（厘⽶）或in（英⼨）。因此如果要精确的控制打印效果就应该使⽤print css，这是跨平台兼容的标准。不推荐使⽤浏览器插件⽅式实现打印。
⾸先引⽤print css打印样式：
<!-- 外链式写法： -->
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<!-- style写法： -->手机上可以打html与css的app
<style media="print">...</style>
<!-- 使⽤link标签规则性能更好 -->
<!--使⽤@media规则可以在通⽤的样式表中，使⽤@media规则指定样式⽤于打印:-->
@media print selector {...}  或者
@media print {
selector{...}
}
@page规则：
@page规则允许你指定页⾯盒⼦的许多⽅⾯,⽐如规定page的尺⼨
@page {
size: 10cm 10cm;<!--通过长度单位cm/in设置-->
}
@page {
size: A4;<!--通过纸质尺⼨关键字设置-->
}
@page {
size: A4 landscape;<!--通过关键字来指定页⾯⽅向portrait/landscape-->
}
设置打印分页：
<!--css设置-->
@media print {
.page {page-break-after: always;}
}
<!--
需要给打印⼀页的内容div加上class.page-->

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。