打印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;/*去掉页边距*/
}

遇到的问题

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

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

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

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

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

打印jQuery.print.min.js 使用总结相关推荐

jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...
多语言切换jquery.i18n.min.js
项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jque ...
jquery.placeholder.min.js让你的IE浏览器支持placeholder
2019独角兽企业重金招聘Python工程师标准>>> jquery.placeholder.min.js让你的IE浏览器支持placeholder http://www.ijque ...
异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property ‘style‘ of undefined原因
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 报错: jquery.dataTables.min.js:62 Uncaught TypeError ...
HTML网页使用CDN的jquery.qrcode.min.js生成页面二维码（直接可以复制使用）
HTML页面代码 <!DOCTYPE html> <html> <head><title></title><meta http-equ ...
jquery.validate.min.js 插件
1.导入js库: 注意:(在这里我导入的单单是jquery.validate.min.js,没有导入jq的其它,不要忘记哦) <script src="http://static.ru ...
jquery.validate.min.js使用介绍
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...
Qrcode生成二维码之jquery.qrcode.min.js
PHP交流群:294088839, Python交流群:652376983, GO交流群:874512552. jquery-1.8.3_min.js和jquery.qrcode.min.js jq ...

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

打印jQuery.print.min.js 使用总结相关推荐

最新文章

热门文章