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

 这篇文章主要介绍了JS选择打印内容,主要是把自己要打印的东西用一个DIV层抱起来,需要的朋友可以参考下

由于项目的需要在一个页面中选择打印内容。 
 
把自己要打印的东西用一个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; 

 
}); 
 
这样既可以实现局部选择打印和局部不选择打印 
 

时间: 2024-09-17 03:30:19

JS实现局部选择打印和局部不选择打印的相关文章

JS实现局部选择打印和局部不选择打印_javascript技巧

由于项目的需要在一个页面中选择打印内容. 把自己要打印的东西用一个DIV层抱起来.例如: 复制代码 代码如下: <!-- 信访事项转办告知单Start --> <div id="itemVrbjForm" style="font-family:'仿宋','宋体';font-size: 18px; margin-top: 290px;" > <div style="width: 600px; margin:0 auto;&quo

使用js callback机制实现调用页面局部刷新

需求描述:审批表单页面由我的待办工作中打开,办理完毕后希望关闭该页面并且实现我待办表格的实时刷新;同时该需求也同样适用于从某些工作流管理模块中需要发起审批的情况,比如招聘需求模块中发起录用流程;我的绩效管理中审批绩效等. 我们先来看看之前的实现,该逻辑实现的功能是,从我待办列表中发起审批,审批结束后直接在当前页面,也就是审批页面跳转至一个新的oa主页面,并且打开我的工作-我待办的页签,实现方法如下: $("#but_back").bind("click", func

js点击文本框弹出可选择的checkbox复选框_javascript技巧

本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

delphi rave分页打印-Delphi rave如何选择指定页打印

问题描述 Delphi rave如何选择指定页打印 Delphi rave如何选择指定页打印,打印预览的时候选择了打印2到2,或3到4,但总是从第一页开始打印,请问各位大侠,怎么解决,谢谢! 解决方案 http://wenku.baidu.com/link?url=1otOFkPvTGSDeSQh_4VPoViaYHvkkZuGFLawLBTp2N1vc5XFpMbnz96FCjqBb4BREHFFjyPT7UKY5KBaOvAXQV1mXuOdK-9nGYnGHilSW9S 解决方案二: 按照

有没有一种较好的js周历控件,可以实现选择上一周、下一周。并可以显示这选中的这一周的所有日期

问题描述 有没有一种较好的js周历控件,可以实现选择上一周.下一周.并可以显示这选中的这一周的所有日期 在web页面我想要对日历的操作,可以选择上一周.下一周,并显示这一周的日期.有没有一种较好的方法.我希望用my97这个日历控件,可不可以 解决方案 JS操作日期,顺便实现 上一周 和 下一周 功能JS实现上一周和下一周js 实现今天的上一周和下一周 解决方案二: My97DatePicker 控件就可以实现你的功能啊,使用参考:http://www.my97.net/dp/demo/resou

Ext JS 4实现带week(星期)的日期选择控件(实战二)_extjs

前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对象用于处理时间.但是Date 并没有提供获取星期的方法. 要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现. 当然, jquery 的扩展组件 等有直接提供这样的一些现成包. 像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(d

web的各种前端打印方法之jquery打印插件jqprint实现网页打印_jquery

web的打印方法具我自己懂得知道的有: 1.JQuery插件Jqprint实现 2.JQery打印插件PrintArea实现网页打印 3.CSS控制网页打印样式 JQuery插件Jqprint实现: 首先要导入js文件: jquery.jqprint.js下载 复制代码 代码如下: <script language="javascript" src="jquery-1.7.1.min.js"></script> <script lang

Web打印解决方案之普通报表打印功能_javascript技巧

做过很多的Web项目,大多数在打印页面内容的时候,采用的都是通过Javascript调用系统内置的打印方法进行打印,也就是调用PrintControl.ExecWB(?,?)实现直接打印和打印预览功能.打印的效果及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是可以的了. 代码如下所示: 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->

《jQuery Cookbook中文版》——1.8 将前一个选择集包含到当前选择集

1.8 将前一个选择集包含到当前选择集 1.8.1 问题你刚刚对一组元素进行操纵,获得新的元素集.但是,你想同时操作前一个元素集和当前元素集. 1.8.2 解决方案可以用andSelf()方法合并前一个DOM元素选择集和当前选择集.例如,在下面的代码中,首先选择页面上的所有< div>元素.接下来,操纵这组元素,寻找< div>元素中的所有< p>元素.现在,为了同时操作< div>和< div>中找到的< p>元素,可以用andSe