最近在做后台管理系统时，遇到一个需求就是用A4纸张，将特定的内容打印出来。

遇到这种需求，一般都是通过window.print()的方式来处理。

window.print——默认打印body中的全部内容

如果要打印特定dom中的内容，可以通过:

function printpage() {//打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到body中，进行打印，打印完成后，再将之前存储的body内容重新赋值给body即可。windown.print()默认打印的内容是body的内容。let oldStr = window.document.body.innerHTML;let newStr = document.getElementById('printContent').innerHTML;window.document.body.innerHTML = newStr;window.print();window.document.body.innerHTML = oldStr;
}

但是我在使用过程中，用到了elementUi中的dialog弹层，打印的内容是弹层中的内容。如果用上面的方法就会遇到问题，导致弹层无法正常的关闭和打开。原因就是执行完window.print()后,重新给body赋值dom时，破坏了原有的结构。

为了能够正常的实现此功能，我最终采用了layer.open()打开一个新的页面，在此页面中所有的内容都是直接位于dody中的，因此可以直接打印，不需要给body中的dom获取后重新赋值的操作。

预览页面

window.print()打印页面

1.通过layer.open()打开新的页面——打印内容在新的页面中

 layer.open({type: 2,title: '物料清单',closeBtn: 1,shadeClose: true,content: 'DeliveryPrint?id=' + row.id,area: ['100%', '100%'],end: (index, layero) => {layer.close(index);}
})

2.新页面中在mounted中执行下面的代码

mounted(){//获取打印页面的内容接口this.getBillList(this.id);setTimeout(()=> {$(document).ready(()=> {//页面加载成功后，延迟打印setTimeout(()=> {window.print();//获取窗口索引，然后通过layer的方法进行关闭var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);return false;}, 100);});}, 2000);
}

3.css部分代码

@media print {body {height: auto;}.nextPageCls {page-break-after: always;}@page {overflow: visible;size: portrait;margin: 1cm 0.5cm -1cm 0.5cm;}
}

body{height:auto}设置此样式才能让页面打印多张，否则只能打印第一张

page-break-after: always;设置此样式表示要在此元素后面添加换页符

@page设置的是页面超出部分是否隐藏，页面横向或纵向，以及页边距等参数

上面的css样式中，为了能够将底部一个小方块(不知道哪里来的)隐藏掉，所以将底部的margin设置为负数，问题解决！

@page {overflow: visible;size: portrait;margin: 1cm 0.5cm -1cm 0.5cm;
}

最终功能实现！！！