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

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

把自己要打印的东西用一个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;
}

});

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

赞 (0)

相关推荐

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

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

  • js点击文本框弹出可选择的checkbox复选框

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

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

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

  • js中设计一段程序，让它能够打印自己的方法收集藏

    js中设计一段程序,让它能够打印自己 (function(){alert(""+arguments.callee+"()")})() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] function a() { document.write(a, "a()");}a() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] (function a(){alert(""+a+"()")})(

  • JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • 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.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • Web打印解决方案之普通报表打印功能

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

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

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

    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

  • vue-print-nb实现页面打印功能实例(含分页打印)

    目录 安装 引用 API 示例代码 补充:vue-print-nb插件的一些优化 总结 Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb --save 引用 vue2引用 import Print from 'vue-print-nb' // 全局引用 Vue.use(Print); // 或者 // 单组件引用 import print from

随机推荐