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

最新推荐文章于 2023-12-03 09:00:37 发布

hmyhicc

最新推荐文章于 2023-12-03 09:00:37 发布

阅读量4.4k

点赞数 2

文章标签： javascript 打印

本文链接：https://blog.csdn.net/hmyhicc/article/details/77968481

版权

最近在做一个打印订单明细报表的功能，查阅网上资料，一般的思路都是把需要打印出来的区域提取出来，再赋予到当前页面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>

附，生成新窗口打印指定区域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>打印</title>
</head>
<body>
	<script>
		function myPrint(obj){
		  var newWindow=window.open("打印窗口","_blank");
		  var docStr = obj.innerHTML;
		  newWindow.document.write(docStr);
		  newWindow.document.close();
		  newWindow.print();
		  newWindow.close();
		}
	</script>
	<div id="print">
		<hr />
		  打印演示区域,点击打印后会在新窗口加载这里的内容！
		<hr />
	</div>
	<button onclick="myPrint(document.getElementById('print'))">打 印</button>
</body>
</html>

在打印局部内容时，会发现没有样式，这时我们就需要在新窗口中引入样式，但是当引入样式后发现，当第一次打印时样式没有起作用。为什么会这样呢，我发现是因为动态引入的样式文件，而浏览器渲染页面是需要时间的，当浏览器还没有渲染完样式，就已经开始打印了，所以这时候我们需要把打印做一下延时即可

function print(){
	var newWindow=window.open("打印窗口","_blank");
	var docStr = document.getElementById('printContent').innerHTML;//需要打印的内容
	newWindow.document.write(docStr);
	var head = newWindow.document.head || newWindow.document.getElementsByTagName('head')[0];
	var goodsInfo = newWindow.document.getElementById('goodsInfo');//动态修改要打印的内容样式
	goodsInfo.style.padding='0';
	var link = newWindow.document.createElement('link');
	link.type='text/css';
	link.rel = 'stylesheet';
	link.href = 'assets/css/style.css';
	head.appendChild(link);//引入样式文件
	newWindow.document.close();
	setTimeout(function () {
	    newWindow.print();
	    newWindow.close();
	},50);
}