700字范文 > window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现

时间：2021-04-22 01:26:05

最近在做后台管理系统时，遇到一个需求就是用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);}