本文主要介紹了window.print()打印根據(jù)高度設(shè)置居中顯示和布局(縱向橫向)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.頁(yè)面定義打印div按鈕：

    <!-- 打印機(jī)按鈕開(kāi)始 -->               
    <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>  
    <!-- 打印機(jī)按鈕結(jié)束 -->

2.js中寫(xiě)按鈕的監(jiān)聽(tīng)事件、打印之前設(shè)置頁(yè)面樣式的方法

//點(diǎn)擊打印，調(diào)出答應(yīng)機(jī)的方法
    $("#printBtn").click(function(){
        onbeforePrint();    //在打印之前執(zhí)行的方法（目的是修改打印頁(yè)的樣式）
        window.print();    
    });   
 
   //在打印之前執(zhí)行的方法（目的是修改打印頁(yè)的樣式）
    function onbeforePrint(){   //先獲取div的高度，當(dāng)高度小于800px時(shí)，需要設(shè)置距離頂部的值，大于800則已經(jīng)鋪滿整個(gè)A4紙，不用設(shè)置
        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.對(duì)設(shè)置參數(shù)進(jìn)行解釋

@page：打印頁(yè)的樣式名稱
size：portrait;（縱向)
size：landscape;（橫向)
margin:auto 0mm; （上下設(shè)置為自動(dòng)居中，左右邊距為0）
mapHeight ：獲取到div的高度，對(duì)高度進(jìn)行判斷，是否大于800px，大于則不處理（已經(jīng)鋪滿A4紙)，不大于則做差計(jì)算距離頂部的高度值（mm毫米）
style = document.createElement('style')：創(chuàng)建一個(gè)style樣式
style.innerHTML = "@page{size: landscape;margin: auto 0mm;margin-top:"+marginTop+"}"：給樣式設(shè)置值
window.document.head.appendChild(style)：把樣式添加到窗口中

4.效果演示

小屏幕：

大屏幕：

選擇布局和紙張尺寸，打印預(yù)覽會(huì)重新加載：

到此這篇關(guān)于window.print()打印根據(jù)高度設(shè)置居中顯示和布局(縱向橫向)的文章就介紹到這了,更多相關(guān)window.print()打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: