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()打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 分享纯手写漂亮的表单验证

    分享纯手写漂亮的表单验证

    最近没有项目做,闲来没事,于是自己动手写了几个表单验证,特此分享供大家参考
    2015-11-11
  • 使用Map处理Dom节点的方法详解

    使用Map处理Dom节点的方法详解

    本文浅析一下为什么Map(和WeakMap)在处理大量DOM节点时特别有用,文中的代码示例介绍的非常详细,感兴趣的小伙伴可以借鉴阅读
    2023-05-05
  • 使用js验证hash,content hash , chunk hash的区别解析

    使用js验证hash,content hash , chunk hash的区别解

    crypto-js是一个JavaScript加密算法库,用于实现各种加密算法和哈希函数,它提供了一种简单而强大的方式来执行加密操作,包括对称加密算法、非对称加密算法和哈希函数等,本文给大家介绍使用js验证hash,content hash , chunk hash的区别解析,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • 老生常谈JavaScript 数组方法

    老生常谈JavaScript 数组方法

    本文详细介绍了JavaScript数组方法的分类和具体用法,涵盖了数组的添加/删除、查找/访问、遍历、排序/反转、转换以及一些其他实用方法,每种方法都提供了简要的解释和示例代码,帮助读者更好地理解和应用这些方法,感兴趣的朋友一起看看吧
    2025-03-03
  • Js与Jq获取浏览器和对象值的方法

    Js与Jq获取浏览器和对象值的方法

    这篇文章主要介绍了 Js与Jq获取浏览器和对象值的方法的相关资料,需要的朋友可以参考下
    2016-03-03
  • js金额数字格式化实现代码(加减逗号处理)

    js金额数字格式化实现代码(加减逗号处理)

    这篇文章主要介绍了js中将数字格式化为金额的方法,使用加减逗号处理金额,一个格式化金额的代码,有需要的朋友参考下
    2014-04-04
  • js插件YprogressBar实现漂亮的进度条效果

    js插件YprogressBar实现漂亮的进度条效果

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
    2015-04-04
  • 详解JS模块导入导出

    详解JS模块导入导出

    这篇文章主要介绍了详解JS模块导入导出以及相关问题解决方法,需要的朋友学习参考下吧。
    2017-12-12
  • js实现数组转换成json

    js实现数组转换成json

    本文给大家分享的是使用javascript实现的数组转换json的代码,非常简单实用,相当于JSON.stringify(array);,有需要的小伙伴可以参考下。
    2015-06-06
  • JS实现动态生成html table表格的方法分析

    JS实现动态生成html table表格的方法分析

    这篇文章主要介绍了JS实现动态生成html table表格的方法,结合实例形式分析了javascript针对数组数据的读取、遍历以及动态生成相关操作技巧,需要的朋友可以参考下
    2018-07-07

最新评论