js打印局部区域,并且保留input标签里的value值

2017-09-13 20:33:08来源:CSDN作者:hmyhicc人点击

分享

最近在做一个打印订单明细报表的功能,查阅网上资料,一般的思路都是把需要打印出来的区域提取出来,再赋予到当前页面body中,最后执行print()事件。例如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>打印</title>    <link type="text/css" rel="stylesheet" href="css/print.css">   </head><body>    <!--startprint-->    <p class="content">需要打印的内容</p>    <!--endprint-->    <button class="print-btn" onclick="myPrint()">打印</button>    <script>    function myPrint(){        old_html = window.document.body.innerHTML;        start_str = "<!--startprint-->";        end_str = "<!--endprint-->";        new_html = html_str.substr(html_str.indexOf(start_str)+17);        new_html = html_str.substring(0,new_html.indexOf(end_str));  //截取标记之间的代码段        window.document.body.innerHTML = new_html;        window.print();//打印当前页面        document.body.innerHTML = old_html;//恢复原来页面        return false;    }    </script></body></html>

这种方法对于打印纯文字的内容有效,但当打印的内容存在input输入框后,就会出现输入框为空的情况出现。因为上面的方法是通过innerHTML来保存页面源代码的。 但是对于input来说,输入改变的是value值,并不会改变源代码,所以这个方法就失效了。

这时就需要另一种方法来实现了。只需将不需要打印的区域隐藏起来即可。例如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>打印</title>    <link type="text/css" rel="stylesheet" href="css/print.css"></head><body><p class="content">需要打印的内容<input type="text"></p><button class="print-btn" id="btn" onclick="myPrint()">打印</button><script>    function myPrint(){        document.getElementById('btn').style.display='none';//不需要打印的部分隐藏        window.print();        document.getElementById('btn').style.display='block';//恢复打印前的页面        return false;    }</script></body></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台