web打印window.print

这几天一直在研究通过web程序打印条形码到标签上，由于打印机和显示器不同，碰到了各种坑，现一一列出来，给各位参考。

web打印有很多的方式，比如生成pdf打印、JQuery插件、window.print等等，每一种打印方式各有利弊，因为我采用window.print的方式来打印，就把这个过程中碰到的问题以及解决方案记录下来。

我需要打印的内容如下：

<div class="wrap">
                <div  id="userInfoDiv">
                    <div class="userinfo">
                        <span>abcspan>
                        <span>男span>
                        <span>27岁span>
                    div>
                    <input id="printBtn" value="打印" type="button" onclick="printPage()" >
                div>
            div>

1， 页面样式问题：
显示器和打印机是不同的，主要是长度单位的不同，显示器常用px，而打印机很多时候用mm，所以需要两套css样式来控制。

<link rel="stylesheet" href="../assets/css/abc.css" media="screen"/>
<link rel="stylesheet" href="../assets/css/abc-print.css" media="print"/>

其中screen指的是用作显示器， print则为打印机专用。
在abc.css里面，长度宽度等的单位用px，在abc-print.css里面，这些我用的是mm或者百分比。

2， 纸张大小：
我采用的是40mm*30mm大小的纸张打印。所以在abc-print.css里面通过样式来控制打印区域打印输出的大小

    width: 99%;
    height:99%;
    margin:1mm;
    background:none;

3， 打印字体大小
主要也是单位的问题，我采用的是pt而非px

font-size:3pt;

4， 分页符问题：
为了强制让打印分页，我们通常在样式中加入page-break-after: always，这样就可以强制分页了。但是有时候会在最后多一页空白，解决办法为：

.wrap:not(:last-of-type) {
    page-break-after:always;
}

5， html打印时，把不需要打印的模块全部display:none掉，包括title等信息，否则会多出这部分内容。