window.print()打印时根据页面高度设置居中显示、设置打印布局（纵向、横向）

梦里梦外; 2023-10-18 19:42 20阅读 0赞

1.页面定义打印div按钮：

<div style="position: absolute;top:100;right:0px;z-index: 9999;background-color:#EDEDED">                                       
           <span id="printBtn" class="fa fa-print hidden-print" title="打印" style="float:left;font-size:24px;cursor:pointer;"></span>        
        </div>

2.js中写按钮的监听事件、打印之前设置页面样式的方法

//点击打印，调出答应机的方法
        $("#printBtn").click(function(){
            onbeforePrint();    //在打印之前执行的方法（目的是修改打印页的样式）
            window.print();    
        });   
    
       //在打印之前执行的方法（目的是修改打印页的样式）
        function onbeforePrint(){   //先获取div的高度，当高度小于800px时，需要设置距离顶部的值，大于800则已经铺满整个A4纸，不用设置
            var style = document.createElement('style');
            var mapHeight = $("#map").height(); 
            var marginTop = "0mm"; 
            if(mapHeight < 800){       
                var temp = 800 - parseInt(mapHeight);   
                marginTop = (temp/8).toFixed(2)+"mm";            
            }         
            style.innerHTML = "@page{size: landscape;margin: auto 0mm;margin-top:"+marginTop+"}";     
            window.document.head.appendChild(style);  
        }

3.对设置参数进行解释

@page：打印页的样式名称
    
    size：portrait;（纵向)
    
    size：landscape;（横向)
    
    margin:auto 0mm; （上下设置为自动居中，左右边距为0）
    
    mapHeight ：获取到div的高度，对高度进行判断，是否大于800px，大于则不处理（已经铺满A4纸)，不大于则做差计算距离顶部的高度值（mm毫米）
    
    style = document.createElement('style')：创建一个style样式
    
    style.innerHTML = "@page{size: landscape;margin: auto 0mm;margin-top:"+marginTop+"}"：给样式设置值
    
    window.document.head.appendChild(style)：把样式添加到窗口中

4.效果演示

小屏幕：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

大屏幕：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

选择布局和纸张尺寸，打印预览会重新加载：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190613153855923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190613154022464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190613154246728.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70