js打印样式

在项目中，有一个打印的功能，原生的window.print()能够打印出来，但是样式什么的简直不忍直视~，但是要自己写我也是写不出来的，所以百度了一下，知道一个插件jQuery.print.min.js,这个插件能够改变自己需要打印的样式的问题，如果你打印的样式要求和页面一样的话，可以直接引入这个Js就行了，小问题就是页面分页会自动铺满，页头页脚都没有空白位置，如果自己要打印的样式与页面显示的不一样，例如打印文件那么就要自己再写个css了，以下是代码和页面显示效果

先引入jq和jQuery.print.min.js

页面写好后，引入jq和jQuery.print.min.js，之后再写一个修改打印的样式的CSS，

一个类名paging为一页

print.css部分

@media print {

    .inputList {

        margin-top: 30px;

    }

    .paging {

        page-break-after:always;

        /*设置在表格元素之后始终进行分页的分页行为：*/

    }

    .indent2 {

        text-indent: 2em;

    }

    .indent4 {

        text-indent: 4rem;

    }

    .page1 {

        margin-top: 300px;

    }

    .page3 {

        margin-top: 100px;

    }

    @page {

        size: A4 portrait;  /*A4纸，纵向打印*/

        margin: 0;/*去掉页边距*/

    }

}

这里用到了一个分页的属性

参考w3school

page-break-after属性

页面效果

页面效果

右键选择打印

打印效果

这里没有加打印事件，也可以自己加上去