javascript 打印页面

最新推荐文章于 2023-03-03 10:53:44 发布

tyasdxx

最新推荐文章于 2023-03-03 10:53:44 发布

阅读量283

点赞数

分类专栏： html 文章标签： javascript css html5

本文链接：https://blog.csdn.net/macwhirr123/article/details/119956785

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript的window.print()方法来打印网页内容，并通过CSS隐藏不需要打印的页面部分，如底部和页脚。在打印前调整元素样式，然后在打印完成后恢复页面样式，确保用户体验不受影响。

摘要由CSDN通过智能技术生成

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>