前端打印功能实现及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">
    <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>                <br>　　　　 </tr>        <br>　　　　 <tr>                    <br>　　　　　　　　<td>1</td><td>2</td><td>3</td><td>4</td>               <br>　　　　 </tr>        <br>　　</table>
    <div class="part2
"> <br>　　　　　　<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 {    　　<br>　　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一定不要指定宽度，否则在某些浏览器或打印设置有放大时，会出现页面打印不全的问题，如下图。出现此问题原因可查看此篇博客https://www.it1352.com/560600.html

在现实情况下，某些关联性较强的一整块内容，如果不做特殊设置的话，打印出来可能被分割到下一页，而我们不希望这样子。那么可以通过设置该模块为不可分割，例如part2部分，如下设置

.part2 {
   page-break-inside: avoid;//这样part2永远都会在同一页
}
.part1 tr {
   page-break-inside: avoid;//这样设置能保证表格每一行不会被强行分割
}

如果我们想强制从某一部分另起一页，可以设置如下：

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