51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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>`

赞(1)
未经允许不得转载:工具盒子 » javascript 打印页面