jquery 网页局部打印总结-阿里云开发者社区

开发者社区> 科技小毛> 正文

jquery 网页局部打印总结

简介: 最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。
+关注继续查看

最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js

和jquery.PrintArea.js两种。

   最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。但是如果在当前页面div中出现滚动条(div内容过多,出现垂直滚动条)的话,则内容打印不全。所以最终选择的的是jquery.PrintArea.js。这是我现在发现的最明显的区别。

  这两个都是打印指定div内的显示内容。

  jquery.PrintArea.js

  代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script language="javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.PrintArea.js"></script> 
 
$(document).ready(function(){ 
    $("#print").click(function(){ 
        $(".my_show").printArea(); 
    }); 
}); 
 
<div class="my_show"
这个是打印时显示的。 
</div> 
<div class="my_hidden"
这个是打印时隐藏的。 
</div> 
<input type="button" id="print"/>

这个插件还提供了一些参数可配置,使用的方法:$(element).printArea(option). 
这个方法我自己没有用过,大家尝试,有问题的留言哈。 

参数设置: 
1.mode:模式,当点击打印按钮时触发模式,默认为iframe,当设置为popup则会新开一个窗口页面打印。 
2.popTitle:设置新开窗口的标题,默认为空。 
3.popClose:完成打印后是否关闭窗口,默认为false。

 

jquery.jqprint-0.3.js

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language="javascript" src="jquery-1.7.1.min.js"></script> 
<script language="javascript" src="jquery.jqprint.js"></script>
 
<script type="text/javascript"
    $(document).ready(function() { 
        $("#print").click(function(){ 
            $(".my_show").jqprint(); 
        }) 
    }); 
</script> 
 
<div class="my_show"
这个打印时是显示的 
</div> 
<div class="my_hidden"
这个打印时是隐藏的。 
</div> 
<input type="button" id="print"/>

该插件还提供了一些参数可配置:  
debug: false,//如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false 
importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$(“link[media=print]“),若没有会去找$(“link”)中的css文件) 
printContainer: true,//表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。 
operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true

 
 
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/7448501.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8804 0
jQuery选择器总结[转]
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".
629 0
jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。
1153 0
ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
  在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面的例子,我们只希望返回一个1和0有助于进行后续判断即可,没必要返回json类型,返回一个text字符串就可以了.
769 0
Chrome对网页性能的检测--2015-05-05总结
Chrome浏览器非常强大,使用Chrome浏览器对页面性能进行检测,根据测试的结果进行优化。当然这个结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。
736 0
《扩展 jQuery》——6.3 总结
集合插件操作通过选择或遍历得到的元素集合,而函数插件并不应用于这种集合。它们在页面上提供一些工具函数使得一系列交互变得简单。它们隐藏了页面上的一些繁琐的内部工作,并且消除了跨浏览器差异所带来的一些问题。
1030 0
+关注
580
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载