window.print()打印根据高度设置居中显示和布局(纵向横向)
短信预约 -IT技能 免费直播动态提醒
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.效果演示
小屏幕：
大屏幕：
选择布局和纸张尺寸，打印预览会重新加载：
到此这篇关于window.print()打印根据高度设置居中显示和布局(纵向横向)的文章就介绍到这了,更多相关window.print()打印内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
