项目中遇到打印报表的要求，需要只打印报表部分而不是整个页面，一般直接调用系统的方法window.print()，会打印整个页面，发现jQuery.print.min.js 很好用，下面和大家分享下打印制作过程成中遇到的问题和解决方法。
使用方法
1.引入jquery 和 jQuery.print.min.js
2.调用（如下）
//打印
$("打印按钮").on('click',function () {
$("需要打印展示的元素").print({
globalStyles:false,
mediaPrint:true,
iframe:false,
stylesheet:'../commons/css/printBicycle.css'
})
})
| 参数 | 默认值 | 描述 |
|---|---|---|
| globalStyles | true | 是否使用父文档的样式表 |
| mediaPrint | false | 是否使用含有media=”print”的样式表 |
| stylesheet | null | 链接外部样式表 |
| noPrintSelector | “.no-prin” | 非打印内容选择器 |
| iframe | true | 是否使用一个隐藏的iframe来进行打印，也赋值一个已有的iframe的选择器 |
| append | null | 后置打印的自定义html |
| prepend | null | 前置打印的自定义html |
| manuallyCopyFormValues | true | 打印时是否更新的表单数据 |
| deferred | $.Deferred() | 在window.print()调用后resolve一个jQuery.Deferred对象 |
| timeout | 750 | 从iframe或者新窗口加载打印数据的超时时间 |
打印的样式
引入方式：
1.使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
<link rel="stylesheet" href="print.css" media="print" />
2.使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
@media print {
selector{
...
}
}
3.使用@import
@import url(print-style.css) print;
个人项目中使用的插件调用的方式（使用如下），由于项目采用了easyui的tab切签，即使引入了不同的样式表，打开多个切签后，打印样式会互相影响；采用插件自带的引入外部样式的属性，能避免这个问题。
stylesheet:'../commons/css/printBicycle.css'
打印css的控制（以下样式变更只能改变打印的默认值，排除客户自行调整的情况）
纵向
@page { size: portrait; }
横向
@page { size: landscape; }
去掉页眉页脚
@page {
size: A4 landscape; /*A4纸，横向打印*/
margin: 0;/*去掉页边距*/
}
遇到的问题
- 问题：插件中
iframe默认的属性是true,意思是在当前窗口打开打印功能，这样的话打印的报表页眉的标题为文档的<title></title>里面的内容，页脚会有当前网址，客户不喜欢。
解决方式：调用时iframe:true,这样的话点击打印会新开个窗口（没有标题，没有网址），就能去掉页眉页脚中不喜欢的标题和网址。
- 问题：当遇到数据量较大的情况，浏览器会自动切割，分成多个页面，当去掉页眉页脚时，由于打印机的边距问题，会造成边框周围的数据没打印上。
解决方法： 增加上下的页边距@page {margin: 50px 0;}
- 问题：打印的报表内容超出纸张大小
解决方式： 添加缩放zoom(个人比较喜欢这种缩放，看起来比较锐利，字体不会缩小，ps:同时能解决浏览器切割后，造成的描边错位情况)；使用如下
<!--html部分需要给打印的部分加个父元素-->
<div class='需要打印的元素'>
<table>
//.....
</table>
</div>
.需要打印的元素{zoom:.4}
