js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo

最新推荐文章于 2024-05-13 05:08:21 发布

Leemeea

最新推荐文章于 2024-05-13 05:08:21 发布

阅读量3.3k

点赞数

分类专栏：前端-js 文章标签：前端打印打印 js打印缩放打印分页打印

本文链接：https://blog.csdn.net/qq_15088653/article/details/98795155

版权

前端-js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

话不多说，直接上demo，注释备注相当清晰

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩放打印与分页</title>
<script type="text/javascript"> 
	function printpage1(){    
			
			// body全局打印
			// 页面缩放，此处缩放为50%，不缩放的话页面超出就打印不出来，这个需要自己调试，看自己
			document.getElementsByTagName('body')[0].style.zoom=0.5;
			
			// 调用window的打印功能
			window.print(); 
			
			// 将页面缩放调整到最初状态
			document.getElementsByTagName('body')[0].style.zoom=1;
			return false; 
		}
		
		function printpage2(){    
			// 局部打印
			// 获取局部打印数据
			var newstr = document.getElementById("println_div").innerHTML;
			// 缓存body全部数据
			var oldstr = document.body.innerHTML; 
			// 将局部数据放入body内
			document.body.innerHTML = newstr; 
			
			// 页面缩放，此处缩放为50%，不缩放的话页面超出就打印不出来，这个需要自己调试，看自己
			document.getElementsByTagName('body')[0].style.zoom=0.5;
			
			// 调用window的打印功能
			window.print(); 
			
			// 打印完成将body数据还回去
			document.body.innerHTML = oldstr; 

			// 将页面缩放调整到最初状态
			document.getElementsByTagName('body')[0].style.zoom=1;
			return false; 
		}
</script>
</head>
  
<body>
<p>1</p>
<p>2</p>
<div id="println_div">
	<h1>打印标题</h1>
	<p>打印内容~~</p>
	<!-- style属性这里是在打印的时候，在标签之前的将作为1页，标签之后作为新的页 -->
	<div style="page-break-before:always;"><br /></div>
	<h1>打印标题</h1>
	<p>打印内容~~</p>
	<div  style="page-break-before:always;"><br /></div>
	<h1>打印标题</h1>
	<p>打印内容~~</p>
</div>
<button type="button" onclick="printpage1()">全局打印</button>
<button type="button" onclick="printpage2()">局部打印</button>
<p>1</p>
<p>2</p>
</body>
</html>

Leemeea

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo

话不多说，直接上demo，注释备注相当清晰<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>缩放打印与分页</title><script type="te...
复制链接

扫一扫

专栏目录