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

朴灿烈づ我的快乐病毒、 2022-08-28 04:53 238阅读 0赞

最近在做后台管理系统时，遇到一个需求就是用`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`获取后重新赋值的操作。

### 预览页面 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]

## `window.print()`打印页面 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 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;
    }

最终功能实现！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/081b2bee077e43d595a02b5739a8f228.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/4b2a8850f70b4ce88d32293cc103380f.png