实现web打印的各种方法介绍及实现代码


Posted in Javascript onJanuary 09, 2013

wed的打印方法具我自己懂得知道的有:
1、JQuery插件Jqprint实现
2、JQery打印插件PrintArea实现网页打印
3、CSS控制网页打印样式

JQuery插件Jqprint实现
首先要导入js文件:
jquery.jqprint.js下载

<scriptlanguage="javascript"src="jquery-1.7.1.min.js"></script> 
<scriptlanguage="javascript"src="jquery.jqprint.js"></script>

html代码
<divclass="my_show"> 
这个打印时是显示的 
</div> 
<divclass="my_hidden"> 
这个打印时是隐藏的。 
</div> 
<inputtype="button"id="print"/>

javascript代码
<scripttype="text/javascript"> 
$(document).ready(function(){ 
$("#print").click(function(){ 
$(".my_show").jqprint(); 
}) 
}); 
</script>

该插件还提供了一些参数可配置,
{ 
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 
}

而我自己使用到的只有importCSS:原始页面中的链接将导入到iframe。第一次它媒体searchs=打印,如果没有,将导入的正常的css文件。

importCSS示例

$('.my_show').jqprint({ 
importCSS://CSS样式文件 
});
Javascript 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
js去除重复字符串两种实现方法
Jan 09 #Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 #Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 #Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 #Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 #Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 #Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 #Javascript
You might like
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python版本单链表实现代码
2018/09/28 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python程序变成软件的实操方法
2019/06/24 Python
python装饰器使用实例详解
2019/12/14 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
年终考核实施方案
2014/05/26 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2015年采购员工作总结
2015/04/27 职场文书
世界名著读书笔记
2015/06/25 职场文书
大学副班长竞选稿
2015/11/21 职场文书
《搭石》教学反思
2016/02/18 职场文书