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 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript数组排序汇总
Jul 07 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 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
PHP 高手之路(一)
2006/10/09 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
岁月神偷观后感
2015/06/11 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
MySQL 数据 data 基本操作
2022/05/04 MySQL
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS