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>

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐