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

 更新时间:2014年04月03日 15:31:08   作者:   我要评论
这篇文章主要介绍了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;
}

});

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

相关文章

  • 在点击div中的p时,如何阻止事件冒泡

    在点击div中的p时,如何阻止事件冒泡

    本文主要介绍了在点击div中的p时,如何阻止事件冒泡的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript.Encode手动解码技巧

    JavaScript.Encode手动解码技巧

    往往在网页上有JS加密代码的解码方法,但是由于代码中存在转义字符,无法正确的进行解码。
    2010-07-07
  • js实现iframe动态调整高度的代码

    js实现iframe动态调整高度的代码

    iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:
    2008-01-01
  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    这篇文章主要介绍了JS实现微信弹出搜索框 多条件查询功能的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • javascript之弹出窗口居中的代码

    javascript之弹出窗口居中的代码

    有时候我们在网页制作过程中需要弹出窗口,一般情况下,我们更希望窗口可以居中显示
    2007-08-08
  • js 弹出新页面避免被浏览器、ad拦截的一种新方法

    js 弹出新页面避免被浏览器、ad拦截的一种新方法

    本文为大家介绍了使用js弹出新页面同时避免被浏览器、ad拦截等,具体的实现方法如下,大家不妨参考参考
    2014-04-04
  • JS+CSS实现分类动态选择及移动功能效果代码

    JS+CSS实现分类动态选择及移动功能效果代码

    这篇文章主要介绍了JS+CSS实现分类动态选择及移动功能效果代码,涉及JavaScript实现页面元素动态变换效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JQuery加载图片自适应固定大小的DIV

    JQuery加载图片自适应固定大小的DIV

    在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div大小时图片 自动适应div 的大小,实现思路如下,感兴趣的朋友可以了解下
    2013-09-09
  • JS实现图片放大缩小的方法

    JS实现图片放大缩小的方法

    这篇文章主要介绍了JS实现图片放大缩小的方法,结合实例形式分析了javascript动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2017-02-02
  • js Array操作的最简短最容易理解方法

    js Array操作的最简短最容易理解方法

    这篇文章主要是对js中的Array操作进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论