前端打印功能實現及css設置

首先是使用下邊代碼，實現js局部打印功能。參數dom為需要打印的節點，為了保證頁面功能的單一性，最好彈出一個新的預覽頁面完成打印功能。

function print(dom){
   var body = document.body.innerHTML;//先獲取當前頁的html代碼
       document.body.innerHTML = document.querySelector(dom).innerHTML;//需要打印的頁面
       window.print();
       document.body.innerHTML =body;//打印完成之后，還原界面}

實現了js的打印功能之后，就是對於打印部分進行css樣式，在樣式設置我踩了不少坑。下邊假如是要打印的代碼<div class="page">

<div class="page">
    <p> 2.1 甲方出租給乙方的房屋位於 <span class="fb td">北京 北京市海淀區三義廟2號院</span> ，作為居住使用。</p> 
    <p>2.2 房屋現有裝修、訂制款全套家具、衛浴潔具、暢享寬帶、其余配套點綴的裝飾物均由乙方使用，詳見合同附件《入住物品移交書》。</p>  
    <p>2.3《入住物品移交書》作為甲方按照本合同約定交付乙方使用和乙方在本合同租賃期滿交還房屋時的驗收依據之一。</p> 
    <h5 class="text-center">第三條 房屋租金與租賃期</h5> 
    <p>3.1 房屋租金為每月人民幣 <span class="td">陸仟貳佰元整 (¥6200.00)。</span></p> 
    <p>3.2 租賃期自<span class="td">2017年12月29日</span>至<span class="td">2018年12月28日</span>止。</p> 
    <table class="part1">
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td>                
　　　　 </tr>        
　　　　 <tr>                    
　　　　　　　　<td>1</td><td>2</td><td>3</td><td>4</td>               
　　　　 </tr>        
　　</table>
    <div class="part2
"> 
　　　　　　<div class="list left"> 租戶簽字：<div>日期：</div> </div> <div class="list left"> 運營專員簽字：<div>日期：</div> </div> <div class="list left"> 店長審核：<div>日期：</div> </div> </div>

　　　</div>

　　

初始樣式為

.page {
    width:800px;
    margin:0 auto;
}
.page .part1 {    　　
　　width:100%;
}
.page .part2 td{
    height:30px;
 }

　　

然后針對打印樣式進行設置，這里要用到媒體查詢，字體一般用pt單位，寬高和間距一般用物理單位cm或mm

@media print {
    html,body {
        //A4默認為210mm*287mm
        width:210mm
        height:297mm
    }
    .page{
        font-size:10pt;
        width:initial;
    }
    .page .part2 td{
        height:1cm;
    }
   　@page {
　　　　　　size:A5;
      　　 margin:1cm;//設置打印出來的頁面外邊距
    }
}

　　

.page一定不要指定寬度，否則在某些瀏覽器或打印設置有放大時，會出現頁面打印不全的問題，如下圖。出現此問題原因可查看此篇博客

在現實情況下，某些關聯性較強的一整塊內容，如果不做特殊設置的話，打印出來可能被分割到下一頁，而我們不希望這樣子。那么可以通過設置該模塊為不可分割，例如part2部分，如下設置

.part2 {
   page-break-inside: avoid;//這樣part2永遠都會在同一頁
}
.part1 tr {
   page-break-inside: avoid;//這樣設置能保證表格每一行不會被強行分割
}

如果我們想強制從某一部分另起一頁，可以設置如下：

.part2 {
    page-break-before: always;
}

基本上打印所需的特性就是這些了，over。