web页面局部打印

最新推荐文章于 2021-07-20 10:13:45 发布

原创最新推荐文章于 2021-07-20 10:13:45 发布 · 370 阅读

1 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用CSS的@media print规则来设置打印样式，实现web页面的局部打印功能。通过创建新的DOM元素，设置打印和非打印内容的显示隐藏，将所需打印部分克隆并添加到新容器，最后调用window.print方法进行打印，完成后删除临时元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用 css 的 @media print 设置打印样式

思路：

把需要打印的内容用一个容器包裹(容器变量为: printDom)；
创建一个新容器(主要是无副作用，自己创建的元素自己可控，printDom容器不能确定能不能改样式，新容器变量为: newPrintDom，方法: document.createElement(‘div’))；
创建一个样式元素style，设置样式(控制打印元素和非打印元素的显示和隐藏，具体样式见下方代码)；
把printDom容器克隆一份添加到新容器(方法: newPrintDom.appendChild(printDom.cloneNode(true)))；
把新容器(newPrintDom)和style元素添加至body；
最后调用window.print方法，打印后移除新容器(newPrintDom)和style元素，大功告成；

代码：

<body>
	<div>
		<p>不需要打印的内容</p>
		<p>不需要打印的内容</p>
		<p>不需要打印的内容</p>
	</div>
	<button id="btn">打印</button>
	<div id="print-wrap">
		<p>需要打印的内容</p>
		<p>需要打印的内容</p>
		<p>需要打印的内容</p>
	</div>
	<script>
		function printFn(el) {
			let doc = document
  			let body = doc.body || doc.getElementsByTagName('body')[0]
  			let printId = 'print-' + Date.now()

		  	// 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
		  	let content = doc.createElement('div')
		  	content.id = printId

  			// 样式控制与打印无关的元素隐藏
  			let style = doc.createElement('style')
  			style.innerHTML = 'body>#' +
  				printId +
  				'{display:none}@media print{body>:not(#' +
  				printId +
  				'){display:none !important}body>#' +
  				printId + '{display:block;padding-top:1px}}'

			 content.innerHTML = el.outerHTML
			 body.appendChild(style)
			
			 // 与style元素设置的样式相配合
			 // 把打印内容的元素添加到body(作为body的子元素，可用body的子选择器 '>' 控制打印样式)
			 body.appendChild(content)
			 setTimeout(() => {
				 window.print()
				 body.removeChild(content)
				 body.removeChild(style)
			 }, 20) 
		}

		// 点击打印
		document.getElementById('btn').onclick = function() {
			printFn(document.getElementById('print-wrap'))
		}
	</script>
</body>