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

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

把自己要打印的东西用一个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-18 09:48:46

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

JS实现两表格里数据来回转移的方法_javascript技巧

本文实例讲述了JS实现两表格里数据来回转移的方法.分享给大家供大家参考.具体分析如下: 最近做项目里用到了一个 两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮 感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml

JS实现下拉框的动态添加(附效果)_javascript技巧

效果展示: 页面初加载时:      选择车类型后:      选择车颜色后:     JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

利用js获取下拉框中所选的值_javascript技巧

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

js改变style样式和css样式的简单实例_javascript技巧

js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

Javascript打印网页部分内容的脚本_javascript技巧

正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法: 1.在页面的代码头部处加入JavaScript: JavaScript代码 复制代码 代码如下: <script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; ep

js内置对象处理_打印学生成绩单的简单实现_javascript技巧

任务: 1.通过js的内置对象得到当前日期 var date=new Date(); var year=date.toString().slice(11,15); document.write(year.toString()+"年"); var month=date.getMonth(); month=month+1; if(month<10){ document.write("0"+month+"月"); }else{ document.

js选择并转移导航菜单示例代码_javascript技巧

实现html界面 <!DOCTYPE html> <html> <head> <title>Select and Go Navigation</title> <script src="script01.js"></script> <link rel="stylesheet" href="script01.css" rel="external nof

js实现当复选框选择匿名登录时隐藏登录框效果_javascript技巧

本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复

JS打印gridview实现原理及代码_javascript技巧

复制代码 代码如下: var hkey_root = "HKEY_CURRENT_USER"; var hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var hkey_key; function printPage() { try { var RegWsh = new ActiveXObject("WScript.Shell"); hkey_key = &

js window.print实现打印特定控件或内容_javascript技巧

window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? window.print打印指定div 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. 复制代码 代码如下: <html> <head> <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head&g