打印jQuery.print.min.js 使用总结

项目中遇到打印报表的要求，需要只打印报表部分而不是整个页面，一般直接调用系统的方法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;/*去掉页边距*/
}

遇到的问题

1. 问题：插件中iframe默认的属性是true,意思是在当前窗口打开打印功能，这样的话打印的报表页眉的标题为文档的<title></title>里面的内容，页脚会有当前网址，客户不喜欢。
   解决方式：调用时 iframe:true,这样的话点击打印会新开个窗口（没有标题，没有网址），就能去掉页眉页脚中不喜欢的标题和网址。

1. 问题：当遇到数据量较大的情况，浏览器会自动切割，分成多个页面，当去掉页眉页脚时，由于打印机的边距问题，会造成边框周围的数据没打印上。
   解决方法： 增加上下的页边距 @page {margin: 50px 0;}

1. 问题：打印的报表内容超出纸张大小
   解决方式： 添加缩放zoom(个人比较喜欢这种缩放，看起来比较锐利，字体不会缩小，ps:同时能解决浏览器切割后，造成的描边错位情况)；使用如下

  <!--html部分需要给打印的部分加个父元素-->
<div class='需要打印的元素'>
  <table>
    //.....  
  </table>
</div>

.需要打印的元素{zoom:.4}