window.print()打印根据高度设置居中显示和布局(纵向横向)

 更新时间:2022年06月30日 09:13:27   作者:清云青云  
本文主要介绍了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()打印根据高度设置居中显示和布局(纵向横向)的文章就介绍到这了,更多相关window.print()打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现简易QQ聊天界面

    JavaScript实现简易QQ聊天界面

    这篇文章主要为大家详细介绍了JavaScript实现简易QQ聊天界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js变换显示图片的实例

    js变换显示图片的实例

    题意:在界面上有一张图片,下面有四个单选按钮,点击每一个按钮图片变换成不同的图片
    2013-04-04
  • echart自适应宽度的两种方法实例

    echart自适应宽度的两种方法实例

    最近工作中element后台管理使用Echarts图表,在使用过程中也遇到了些问题,下面这篇文章主要给大家介绍了关于echart自适应宽度的两种方法,需要的朋友可以参考下
    2022-12-12
  • Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    这篇文章主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript 滚轮事件使用说明

    JavaScript 滚轮事件使用说明

    用过 Google 地图的人可能都很熟悉,通过滚动滚轮可以对地图进行缩放,非常地方便。适当地使用滚轮事件可以带来不错的用户体验。
    2010-03-03
  • IE浏览器PNG图片透明效果代码

    IE浏览器PNG图片透明效果代码

    平常,我们经常使用Gif格式的图片以保持图片在浏览器中透明,以支持底色。但由于IE浏览器本身的原因,我们无法使透明的PNG图片透明起来。那么,如何将它在IE浏览器下变得透明呢?
    2008-09-09
  • 通过js简单实现将一个文本内容转译成加密文本

    通过js简单实现将一个文本内容转译成加密文本

    将文本内容转译成加密文本,在某些情况下还是比较实用的,下面通过js简单实现下,感兴趣的朋友不要错过
    2013-10-10
  • js实现黑色简易的滑动门网页tab选项卡效果

    js实现黑色简易的滑动门网页tab选项卡效果

    这篇文章主要介绍了js实现黑色简易的滑动门网页tab选项卡效果,可实现简单的鼠标滑过tab项切换对应菜单的功能,涉及javascript鼠标事件控制页面元素的遍历与样式改变实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js实现点击生成随机div

    js实现点击生成随机div

    这篇文章主要为大家详细介绍了js实现点击生成随机div,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript数据类型的转换详解

    JavaScript数据类型的转换详解

    JavaScript是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。本文就来和大家聊聊JavaScript中的数据类型转换,感兴趣的小伙伴可以了解一下
    2022-12-12

最新评论