js网页打印的4种方式和相关内容

前言

在网页上打印通常都是Ctrl+p，例如百度首页打印预览：

我们有时候在项目中也会使用打印的功能，基本上都是打印网页上的一部分内容，比如某块区域的文章、表格或者标签。总的来说就是自定义需要打印的区域，接下来就让我们一起来看一下吧！

注释方式打印

html代码：

	<h1>注释区域外不需要打印的内容</h1>
	<!--开始-->
	<h1>注释区域需要打印的内容</h1>
	<!--结束-->
	<h1>注释区域外不需要打印的内容</h1>
	<input type='button' onclick="labelPrint()" value='打印'>

页面预览：

js代码：

	function labelPrint() {
		//获取页面内容  
		var html = document.body.innerHTML;  
		//注释内容 
		var start = "<!--开始-->";   
		var end = "<!--结束-->";
		//通过slice截取<!--开始-->和<!--结束-->之间的内容
		var printHtml = html.slice(html.indexOf(start) + start.length,html.indexOf(end));
		//将截取的内容显示在页面上
		document.body.innerHTML = printHtml;  
		//调用浏览器打印方法
		window.print();
		//打印完成或取消打印返回之前的页面内容
		document.body.innerHTML = html ;
	}

演示：

id选择打印

html代码：

	<p>id区域外不需要打印的内容</p>
	<p id="inner">id区域需要打印的内容</p>
	<p>id区域外不需要打印的内容</p>
	<input type='button' onclick="idPrint()" value='打印'>

页面预览：

js代码：

	function idPrint(){
		//获取页面内容
		var html = document.body.innerHTML;  
		//获得id里的内容
		var printHtml = document.getElementById("inner").innerHTML;
		//需要打印的内容渲染在页面上
		document.body.innerHTML = printHtml;
		//调用浏览器打印方法
		window.print();
		//打印完成或取消打印返回之前的页面内容
		document.body.innerHTML = html ;
	}

演示：

以上两种打印方式，都存在一个问题：如果页面注册了事件，打印的时候会重新构建当前页面内容，打印成功或者返回，只是还原了之前的页面内容，但是注册的事件会全部失效。虽然可以调用window.location.reload()重新刷新页面使事件生效，但是当页面情况比较复杂，或者打印的内容不是在第一层次（比如弹窗里面的内容）的时候，重新刷新页面就变得比较局限性了。如下：

	<p>id区域外不需要打印的内容</p>
	<p id="inner">id区域需要打印的内容</p>
	<p>id区域外不需要打印的内容</p>
	<input type='button' onclick="idPrint()" value='打印'>
	<input type='button' id="btn" value='测试打印事件'>
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert('点击事件存在');
		};
		function idPrint(){
			var html = document.body.innerHTML; 
			var printHtml = document.getElementById("inner").innerHTML;
			document.body.innerHTML = printHtml;
			window.print();
			document.body.innerHTML = html ;
		}
	</script>

效果预览：

可以看见取消打印之后原来注册的点击事件已经失效了，注释打印和id选择打印的原理是一样的，在这里就不进行演示了，总之重新构建页面事件就会失效，那么除了重新刷新页面还有什么方法可以使原来页面注册的事件不失效呢？？？我们来看看下一种打印方式。

新建页面打印

我们可以使用window.open()方法重新打开一个页面，将需要打印的内容放在新页面中打印，打印成功或者取消再关闭这个页面，这样就可以避免事件失效的问题了。

	<h1>新页面不需要打印的内容</h1>
	<div id="inner"><h1>新页面需要打印的内容</h1></div>
	<h1>新页面不需要打印的内容</h1>
	<input type='button' onclick="broPrint()" value='打印'>
	<input type='button' id="btn" value='测试打印事件''>
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert('点击事件存在');
		};
		function broPrint(){
			//获得id里的内容
			var printHtml = document.getElementById("inner").innerHTML;
			//重新打开一个页面
			var newWind = window.open();
			//在新页面渲染需要打印的内容
			newWind.document.body.innerHTML = printHtml;
			//调用新页面的打印方法
			newWind.print();
			//打印完成或取消关闭新页面
			newWind.close();
		}
	</script>

效果预览：

因为原页面结构没有重新被渲染，所以打印取消事件还是存在的。但是这种方式打印的时候都会重新打开一个页面，体验感不是很好，而且以上3种方式都会在页面中显示打印内容，那么有没有什么方法不用新建页面，页面不显示打印的内容，事件不失效，也能自定义需要打印的内容呢？让我们来看看最后一种打印方式。

iframe方式打印

iframe标签是html中的一个内联框架元素，能够将一个html页面嵌入到iframe标签中，也就说明这个元素里有完整的html结构。

	<h1>iframe不需要打印的内容</h1>
	<div id="inner"><h1>iframe需要打印的内容</h1></div>
	<h1>iframe不需要打印的内容</h1>
	<input type='button' onclick="iframePrint()" value='打印'>
	<input type='button' id="btn" value='测试打印事件''>
	<iframe id="iframe" name="iframeName" style="display:none"></iframe>
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert('点击事件存在');
		};
		function iframePrint(){
			//获得id里的内容
			var printHtml = document.getElementById("inner").innerHTML;
			//将iframe标签里的body结构换成需要打印的内容
			document.getElementById("iframe").contentDocument.body.innerHTML = printHtml;
			//调用iframe这个子窗口的打印方法
			window.frames["iframeName"].print();
		}
	</script>

效果预览：

可以看见这种方式的体验感是最好的！！！

注意：打印定义方法的时候，名称千万不要命成function print()，因为这会覆盖掉window.print()方法。

扩展

打印区域中不需要打印的内容

在自定义打印内容区域的时候，可能有些内容不需要打印出来，我们可以使用隐藏的方式来避免打印这些内容。

	<h1>iframe不需要打印的内容</h1>
	<hr>
	<div id="inner">
		<h1>iframe需要打印的内容</h1>
		<h1 id="hidden">iframe需要隐藏的内容</h1>
		<h1>iframe需要打印的内容</h1>
	</div>
	<hr>
	<h1>iframe不需要打印的内容</h1>
	<input type='button' onclick="iframePrint()" value='打印'>
	<iframe id="iframe" name="iframeName" style="display:none"></iframe>
	<script>
		function iframePrint(){
			//需要打印的区域
			var printHtml = document.getElementById("inner").innerHTML;
			//iframe的document结构
			var iframeDocument = document.getElementById("iframe").contentDocument;
			//将iframe标签里的body结构换成需要打印的内容
			iframeDocument.body.innerHTML = printHtml;
			//将不需要打印的内容隐藏掉
			iframeDocument.getElementById("hidden").style.display = 'none';
			//调用iframe这个子窗口的打印方法
			window.frames["iframeName"].print();
		}
	</script>

效果预览：

可以看见iframe需要隐藏的内容这句也是打印区域的内容，设置了隐藏之后，在打印预览界面就不会显示这条信息了，可以满足我们的需求。

分页打印

浏览器自带的打印功能是根据内容多少来分页的，就是当前打印页显示不下了才会自动分页，并且有的内容还会出现上下两页分页时，将这个整体内容划开的情况：

那么有没有什么方法可以自定义打印分页呢？

css提供了可以用来设置打印分页的属性：

1. page-break-after：指定元素后面插入分页符。
2. page-break-before：指定元素前添加分页符。
3. page-break-inside ：指定元素中插入分页符。

一般我们都使用 page-break-after:always在元素后插入分页符。

	<h1>iframe不需要打印的内容</h1>
	<hr>
	<div id="inner">
		<h1 style="page-break-after: always">第一页内容</h1>
		<h1 style="page-break-after: always">第二页内容</h1>
		<h1>第三页内容</h1>
	</div>
	<hr>
	<h1>iframe不需要打印的内容</h1>
	<input type='button' onclick="iframePrint()" value='打印'>
	<iframe id="iframe" name="iframeName" style="display:none"></iframe>
	<script>
		function iframePrint(){
			var printHtml = document.getElementById("inner").innerHTML;
			var iframeDocument = document.getElementById("iframe").contentDocument;
			iframeDocument.body.innerHTML = printHtml;
			window.frames["iframeName"].print();
		}
	</script>

效果预览：

可以看见元素设置了page-break-after:always属性后，该元素之后的内容就会单独分页显示。

最后

以上只是我了解到的js网页打印的相关内容，如果哪里存在问题或者还有补充的，欢迎大家评论指出和交流！！！