• 注册

解决jQuery打印插件printArea不显示样式或图片的问题

jQuery有个局部打印的插件 PrintArea,采用的是JSON配置,可以通过popup或者iframe的方式来呈现,使用起来非常简单。

相关网址

官网下载:http://plugins.jquery.com/PrintArea/

GitHub示例:https://github.com/RitsC/PrintArea

使用方法也非常简单,但有几点需要注意的,我们一起来看看!

使用方法

1、引入 jquery.js 和 jquery.printarea.js 文件

2、在需要打印的区域,添加一个最外层div

比如

<div id="print-area">
    这里是要打印的区域
</div>

3、在打印区域代码后,加上如下JS代码

<script>
$('#print-area').printArea();
</script>

接下来就点击 print-area 按钮就可以实现局部打印了。

拓展一下

从 github 示例代码中看出,这个printArea(),是可以添加很多参数的,比如

vardefaults = {
	mode : modes.iframe,
	standard : standards.html5,
	popHt : 500,
	popWd : 400,
	popX : 200,
	popY : 200,
	popTitle : '', //打印窗口标题
	popClose : false,
	extraCss : '',
	extraHead : '',
	retainAttr : ["id", "class", "style"]
};

$('#print-area').printArea( vardefaults );

打印样式问题

最后我们来聊一聊打印中出现的几个问题,比如打印页面空白,打印页面不显示样式,打印页面不显示图片或者不显示背景图片(background设置的图片)等等问题,这里按老杨最近实操中出现的问题,给出几个参考解决方案,可一一实验。

1、要想打印出样式,需要将样式放在需要打印的内容内,也就是上面第2步中的div内包含着。样式可以写在

中,也可以直接 也行,如果不想跟显示的样式冲突,可以添加 print 参数

<link type="text/css" rel="stylesheet" href="<?php echo plugins_url('../static/css/ywm-print.css', __FILE__); ?>" media="print" />
<style type="text/css" media="print"> 
#header, #footer, .banner{display:none}
.print{padding:20px 0px;}
</style>

2、页面加载开第一时间不要着急打印,耐心等图片加载完毕。

3、老杨在实操中采用步步删除的debug方式,发现插件与 bootstrap.min.css 有冲突,删除 bootstrap.min.css 引用文件后,打印样式正常、图片也正常。如果不想删除 bootstrap.min.css 文件,可以为其添加一个 media 属性,让它只影响屏幕显示样式,不影响print打印效果。

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css?ver=17.2" type="text/css" media="screen">

其他待有空再更新,如有新的冲突或解决方案,欢迎各位交流!

 

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册