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

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()打印时根据页面高度设置居中显示、设置打印布局（纵向、横向）相关推荐

打印设置自定义表尾_Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到...
Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到时间:2013-10-25 作者:snow 来源:互联网在打印表格的过程中,想必大家会遇到这样的问题,就是当表格特别大时 ...
html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...
word如何设置长宽高_word页面高度和宽度怎么设置
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. word设置宽度高度的方法: 1.首先打开一篇文档,在功能区选择"页面布局". 2.在页面布局的页面设置功能区 ...
EXCEL多页打印时，上边框线无法显示
excel打印多页,从第二页开始第一行的上边框线无法显示.请问怎么解决. 不是不显示.是正好与上面的页眉的下面的显示重叠了.所以,看着不明显.但是打印预览是正常的. 调整下页面打印预览里也不显示的. ...
excel表格行列显示十字定位_WPS表格：Excel表格打印时，如何每页都显示标题行？...
电子表格数据很多的时候,要分很多页打印,如何每页都能显示标题行呢? 以下表为例,我们在WPS2019中演示如何每页都显示前两行标题行? 1.首先点亮顶部的页面布局选项卡.然后点击打印标题或表头按钮. ...
ie中的html分页控制,IE中HTML打印时实现每页都有的表头和打印分页
/p> Transitional//EN"> 无标题文档 @media print{ INPUT {display:none} } width="300px" ...
html实现页面中内容居中显示图片,javascript怎么让图片居中显示？
javascript怎么让图片居中显示?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. javascript让图片居中显示的方法 1.准备一个图片,如图, ...
打印时页眉高度不同 — 已解决哦
最近写论文,要求奇偶页上页眉不同.偶数页上是论文标题,奇数页是章标题.那么在每个一级标题前插入->分隔符->奇数页(因为第一页在右边),光标放于首页,然后最关键的是文件->页面设置 ...
Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到
在打印表格的过程中,想必大家会遇到这样的问题,就是当表格特别大时,而且只有首页有表头,其他页都没有,这样就算打印出来也不利于查看,因为并不是每一页都有表头.有什么方法可以将表头固定起来,在打印之后每页 ...

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

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

最新文章

热门文章