JS调用iframe方式实现Web区域打印页面内容

2019-12-01 12:47栏目:竞技宝竞猜
TAG:

由于项目的需要在一个页面中选择打印内容。 把自己要打印的东西用一个DIV层抱起来。例如: 复制代码 代码如下:

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

1、程序说明
 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;
 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容。

(告知单编号:${zjxfItemUser.acceptedNo })

把自己要打印的东西用一个DIV层抱起来。例如:

2、代码部分
 1) JS 函数:

信访事项转办告知单

复制代码 代码如下:

 代码如下

${zjxfItemUser.userName }:
,本机关提出的${zjxfItemUser.subject }信访事项, 该信访事项属于XXX职权范围内的事项,根据《信访条例》的有关规定,本机关已于XXXX年XX月XX日将有关材料转交给XXX处理,请及时与其联系。
特此告知。

<!-- 信访事项转办告知单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 -->

复制代码

(盖${zjxfProcessOver.subOrgname }专用章或公章)

中间有不需要打印了,也用一个DIV层包含起来。利用CSS样式中的。在不需要打印的层中引用class="noprint"就搞定了

function do_print(id_str)//id-str 打印区域的id
{
      var el = document.getElementById(id_str);
      var iframe = document.createElement('IFRAME');
      var doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      // 引入打印的专有CSS样式,www.111Cn.net根据实际修改
      doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
      doc.write('<div>' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
           document.body.removeChild(iframe);
      }
}

中间有不需要打印了,也用一个DIV层包含起来。利用CSS样式中的。在不需要打印的层中引用就搞定了 复制代码 代码如下:

复制代码 代码如下:

2) HTML:

JS代码: 注意:在选择打印的时候样式会丢失,需要在打印之前加上你的打印即可。 复制代码 代码如下: ${ $.click{ var html = window.document.body.innerHTML; exportCSS; }); //导入样式到选择打印中 function exportCSS{ var CSS = " " + " " + "" + "" + "" ; $.appendTo; window.document.body.innerHTML = $.html; window.document.body.innerHTML = htmlInfo; } }); 这样既可以实现局部选择打印和局部不选择打印

<style type="text/css" media="print">
.noprint{visibility: none;}
</style>

// 打印区域:
<div id="print_box">
......
</div>
// 调用打印
<button onclick="javascript:do_print('print_box');">打印</button>

JS代码:

CSS:

注意:在选择打印的时候样式会丢失,需要在打印之前加上你的打印即可。

根据具体需要进行修改添加。

复制代码 代码如下:

 

$(function(){

  1. 测试

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JS调用iframe方式实现Web区域打印页面内容