JS实现局部选择打印和局部不选择打印


Posted in Javascript onApril 03, 2014

由于项目的需要在一个页面中选择打印内容。

把自己要打印的东西用一个DIV层抱起来。例如:

<!-- 信访事项转办告知单Start --> 
<div id="itemVrbjForm" style="font-family:'仿宋','宋体';font-size: 18px; margin-top: 290px;" > 
<div style="width: 600px; margin:0 auto;"> 
<div style="float: right;margin-top: -40px;">(告知单编号:${zjxfItemUser.acceptedNo })</div> 
<div id="title" style="margin-top: 40px;" ><span>信访事项转办告知单</span></div> 
${zjxfItemUser.userName }:(信访人名称)<br/> 
         
<span id="itemVrbjTime"></span>,本机关(或单位)依法受理了你(或你们)提出的${zjxfItemUser.subject }信访事项, 
该信访事项属于XXX职权范围内的事项,根据《信访条例》的有关规定,本机关已于XXXX年XX月XX日将有关材料转交给XXX处理,请及时与其联系。<br/> 
         特此告知。<br /> 
<div style="margin-top:50px;margin-right: 20px;float: right;">(盖${zjxfProcessOver.subOrgname }专用章或公章)</div> 
<div style="margin-top:90px;margin-right: -190px;float: right;"><span id="itemVrbjEndTime"></span></div> 
</div> 
</div> 
<!-- 信访事项转办告知单End -->

中间有不需要打印了,也用一个DIV层包含起来。利用CSS样式中的。在不需要打印的层中引用class="noprint"就搞定了
<style type="text/css" media="print"> 
.noprint{visibility: none;} 
</style>

JS代码:

注意:在选择打印的时候样式会丢失,需要在打印之前加上你的打印即可。

$(function(){ $("#print").click(function(){ 
var html = window.document.body.innerHTML; 
exportCSS("itemVrbjForm",html); 
}); 
//导入样式到选择打印中 
function exportCSS(formName,htmlInfo){ 
var CSS = "<link href=\""+ baseURL +"/zjxf/common/css/common.css\" type=\"text/css\" rel=\"stylesheet\" /> " + 
"<link href=\""+ baseURL +"/zjxf/common/css/table.css\" type=\"text/css\" rel=\"stylesheet\" /> " + 
"<link href=\""+ baseURL +"/zjxf/common/css/form.css\" type=\"text/css\" rel=\"stylesheet\" />" + 
"<link href=\""+ baseURL +"/zjxf/common/css/tab.css\" type=\"text/css\" rel=\"stylesheet\" />" + 
"<link href=\""+ baseURL +"/zjxf/common/css/print.css\" type=\"text/css\" rel=\"stylesheet\" />" ; 
$(CSS).appendTo("#" + formName); 
window.document.body.innerHTML = $("#" + formName).html(); 
window.print(); 
window.document.body.innerHTML = htmlInfo; 
} 
});

这样既可以实现局部选择打印和局部不选择打印
Javascript 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
一端时间轮换的广告
2006/06/26 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
jQuery length 和 size()区别总结
2018/04/26 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python做接口测试的必要性
2019/11/20 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
商家认证委托书格式
2014/10/16 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
利用python做数据拟合详情
2021/11/17 Python