• 2024-10-07
宇哥博客 前端开发 javascript 打印页面

javascript 打印页面

javascript ,window.print()打印页面,隐藏不需要的部分,指定区域打印。

<div class="container">
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容</p>    
</div>
 
<div id="bottom">
     <p>bottom内容</p>
</div>
 
<div id="footer">
    <p>footer内容</p>
</div>
 
 
<a href="javascript:;" onclick="doPrint();" >打印清单</a>
 
 
 
 
 
<script type="text/javascript">
	
function doPrint(){
		console.log('*******打印');
		
        //下面隐藏页面中不需要的部分
		$('.container').css('margin-top','200px');
		$('.container').css('margin-left','10px');
		$('#bottom').hide();
		$('#footer').hide();
        //下面这个解决打印预览出现一页空白的问题
		$('body').css('height','85%');//缩小点,要不会出现两页
		
		
		var ss=window.print();
		console.log('*****ss****' ,  ss );
		
		//点击“打印”或“取消”后返回“undefined”
		if(ss == undefined){
			
			console.log('***undefined****');
			
			//直接刷新下页面,恢复页面样式
			window.location.href=window.location.href;
 
            //也可以执行js,恢复页面样式
            /*
            $('.container').css('margin-top','0');
		    $('.container').css('margin-left','0');
		    $('#bottom').show();
		    $('#footer').show();            
            $('body').css('height','100%');
            */
		}
	}
 
</script>
本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/1053.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部