JS选择打印
2014-04-03 14:17
513 查看
由于项目的需要在一个页面中选择打印内容。
把自己要打印的东西用一个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;
}
});
这样既可以实现局部选择打印和局部不选择打印
把自己要打印的东西用一个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;
}
});
这样既可以实现局部选择打印和局部不选择打印
相关文章推荐
- JS实现局部选择打印和局部不选择打印
- js 禁止内容选择 禁止打印 禁止右键弹出菜单
- JS实现局部选择打印和局部不选择打印
- js 选择打印区域
- JS禁用右键、禁止选择文本、禁用打印、防止另存为
- js 打印时如何 选择默认打印机
- js 打印web页面
- js生成二维码并局部打印
- js 表格排序 支持 中英文 , 可选择不排序的行
- Js选择框脚本 移动操作select 标签中的 option 项的操作事项
- vuejs高德地图位置选择组件的开发及使用/vuejs地图开发
- JS中attr和prop属性的区别以及优先选择示例介绍
- 打印-print.js
- android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
- JS日期和时间选择控件
- js打印九九乘法表
- js打印去掉网址和日期
- JS 实现简单的页面局部打印
- js日历选择日期插件使用(My970DatePicker)
- js调用打印机打印网页字体总是缩小一号的解决方法