网页打印去掉页眉页脚

整体代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		#printArea{
			width: 500px;
			height: 500px;
			margin: 0px auto;
		}
		#printArea img{width: 100%;}
	</style>
	<!--去掉页眉页脚-->
	<style media="print">
	   	@page {
		  size: auto;
		  margin: 0mm;
		}
	</style>
</head>
<body>
	<button onclick="printTest()">
		print
	</button>
	<div id="printArea">
		<img src="图片地址 自行更换" alt="" />
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.printarea.js"></script>
<script>
	function printTest(){
		$("#printArea").printArea();
	}
</script>
</html>

此例子打印未使用window.print(),而是使用了插件(打印指定区域)JQuery.printarea,这是项目需要,可以不用管,也可以换成JS系统打印函数。

去掉页眉页脚使用CSS @page,代码为:
<!--去掉页眉页脚-->
<style media="print">
     @page {
	 size: auto;
         margin: 0mm;
     }
</style>

效果截图: