如果你需要直接打印当前页面,那么你不用再往下看了,直接使用浏览器自带的工具栏中的“打印”即可。如果你的实际需求是页面上显示很多内容,但你只想打印指定区域的内容,进一步可能还想把本来显示在一起的内容,分成好几页进行打印,那么本文希望能够提供一个最简方案。
实现的方法其实很简单,直接使用JavaScript自带window.print()方法即可实现类似点击浏览器进行打印的效果,不过这种方式是打印当前窗口的内容(即body的整个内容)。如果只想打印指定区域的内容怎么办呢?最简单的思路是将body的内容先替换成指定区域的内容,再进行内容的还原即可。如果指定区域本就在一页内容里面,需要硬拆成好几页进行打印怎么办呢?这里借助下CSS里面的打印属性即可,在打印时会根据页面样式把内容分成自定义的多页。
下面直接贴代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="printContent">
<div id="page1">这是第一页内容</div>
<!--这里用到分页样式-->
<div style="page-break-after: always;"></div>
<div id="page2">这是第二页内容</div>
<div style="page-break-after: always;"></div>
<div id="page3">这是第三页内容</div>
</div>
<div>
<input type="button" id="printButton" value="打印" />
</div>
<script src="js/jquery-1.11.1.js"></script>
<script>
$("#printButton").click(function(){
var bodyContent = $('body').html();
var printContent = $('#printContent').html();
//将body内容替换后进行打印操作,再把body内容还原
$('body').html(printContent);
window.print();
$('body').html(bodyContent);
}
);
</script>
</body>
</html>
这里为了写法简洁,引用了Jquery插件,实际只用原生JS完全就能搞定了,思路是一致的就行。如果你需要分很多页,那么把CSS分页样式抽出来,写在样式表里面再引用就可以了。另外该示例只支持Chrome下的打印。