JS实现分页打印

原生js实现分页打印功能

使用网上的打印插件会有一些无法分页和样式丢失的问题，本文章记录使用window.print()实现打印，需要加入css控制打印内容显示。

分页

打印强制分页，父节点不能有overflow:hidden属性，打印分页模块使用display:inline-block;

	<div style="page-break-before:always;"></div>

实现

首先需要copy需要打印的内容添加到body里面，需要定义一个id或者class用于区分是否是打印的内容，然后当点击打印的时候通过css控制页面只显示打印的内容，最后打印完成删除动态新增的dom

<div id="printHtml">我是打印内容<div>
// 原生的打印实现，将打印内容插入到body,打印完删除dom
let printDom = document.getElementById('printHtml')
let content = document.createElement('div')
content.id = 'printContent'
content.innerHTML = printDom.innerHTML
document.body.appendChild(content)
window.print()
document.body.removeChild(content)

css

设置css只打印指定内容，这里的id和动态生成的打印模块一致

@media print {
	body > *:not(#printContent) {
		display: none;
	}
}

@media screen {
	#printContent {
		display: none;
	}
}