JS实现页面局部打印效果

最新推荐文章于 2024-05-22 15:07:14 发布

Ivan.Cheng

最新推荐文章于 2024-05-22 15:07:14 发布

阅读量387

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/C_277157522/article/details/131044377

版权

点击预览弹出卡片，打印卡片中的内容。

<html>
	<head>
	</head>
	<body>
		<div>
			<h1>文档</h1>
		</div>
		<div>
			<h1>发票</h1>
			<button onclick="doView()">预览</button>
		</div>
		<div id="container">
			<div id="printArea">
				<h1>一.标题</h1>
				<p>1.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
				<p>2.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
				<p>3.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
				<p>4.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
				<p>5.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
			</div>
			<button onclick="hideContainer()">关闭</button>
			<button onclick="doPrint('printArea')">打印</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	function doPrint(elementId){
		const printContainer = document.getElementById(elementId).innerHTML; 
		let iframe = document.getElementById('print-iframe');
		if (!iframe) {
			iframe = document.createElement('iframe');
			iframe.setAttribute('id', 'print-iframe');
			iframe.setAttribute('style', 'position: absolute; width: 0px; height: 0px;left:-500px;top:-500px;');
			document.body.appendChild(iframe);

			var doc = iframe.contentWindow.document;
			doc.write('<title>局部打印</title>');
			doc.write('<style media="print">@page {size: auto; margin: 0 mm;}</style>'); //可以调整打印时特有的样式
			doc.write('<div style="margin: 20px auto;">');
			doc.write(printContainer);
			doc.write('</div>');
			doc.close();	
		}
		// iframe.contentWindow.focus();
		iframe.contentWindow.print();
	}

	function doView() {
      var container = document.getElementById("container");
      container.classList.toggle("show");
    }

    function hideContainer() {
      var container = document.getElementById("container");
      container.classList.remove("show");
    }
</script>
<style>
	#container{
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 800px;
		height: 600px;
		background-color: #f1f1f1;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 20px;
		text-align: center;
	}
    .show {
      display: block !important;
    }
</style>