Chrome下最简分页打印方案

最新推荐文章于 2023-03-03 16:39:34 发布

丘八老爷

最新推荐文章于 2023-03-03 16:39:34 发布

阅读量505

点赞数 1

分类专栏：前端文章标签： Chrome 打印分页打印

本文链接：https://blog.csdn.net/qiubabin/article/details/84693144

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如果你需要直接打印当前页面，那么你不用再往下看了，直接使用浏览器自带的工具栏中的“打印”即可。如果你的实际需求是页面上显示很多内容，但你只想打印指定区域的内容，进一步可能还想把本来显示在一起的内容，分成好几页进行打印，那么本文希望能够提供一个最简方案。

实现的方法其实很简单，直接使用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下的打印。

丘八老爷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrome下最简分页打印方案

如果你需要直接打印当前页面，那么你不用再往下看了，直接使用浏览器自带的工具栏中的“打印”即可。如果你的实际需求是页面上显示很多内容，但你只想打印指定区域的内容，进一步可能还想把本来显示在一起的内容，分成好几页进行打印，那么本文希望能够提供一个最简方案。实现的方法其实很简单，直接使用JavaScript自带window.print()方法即可实现类似点击浏览器进行打印的效果,不过这种方式是打...
复制链接

扫一扫