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.效果演示

小屏幕:

大屏幕:

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

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信