window.open打印功能

浅浅的花香味﹌ 2022-09-16 04:47 275阅读 0赞

今天遇到一个需求，就是在浏览器中打印标签，其实无论是打印标签还是A4纸，最终功能的实现效果都是大同小异的。

最终效果图：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]

## 打印函数的封装 ##

根据上面封装的打印函数，可以看出整体逻辑就是：根据传入的参数，先判断是否有空的数据，如果有空数据，则不能进行打印，如果都是有数据的情况，则进行路径的拼接，然后通过`window.open`的方式来进行调取打印路径从而实现打印功能。

## `window.open(url,'','width=400,height=400,menu=no,toolbar=no')`调出窗口进行打印 ##

## `for`循环，延迟打印功能实现——闭包 ##

printCode(row, obj, arr, d) { 
        for (var i = 0; i < arr.length; i++) { 
            (function (i) { 
                setTimeout(() => { 
                    var data = { 
                        Type: "PrintBomLabel",
                        GroupNo: d && d.groupNo || obj.groupNO || obj.groupNo,
                        OrderNo: d && d.orderNO || obj.orderNO,
                        partNo: row.partNo,
                        mfg: row.mfg,
                        package: row.pack,
                        Parameter: row.parameter,
                        Designator: row.designator,
                        OutSystemRelationId: row.outSystemRelationId,
                        proNum: arr[i].proNum,
                        flag: obj.hasReplenish ? 1 : 0,
                        id: arr[i].id
                    }
                    console.log(data);
                    $WmsPrint.BomPoint(data);
                }, 500 * i);
            })(i)
        }
    },

由于`arr`是一个数组，需要将数组中的每一项都拿出来进行打印，而且打印要有间隔，因此要用到循环，还要延迟。

如果在`for`循环中，调用函数，则很可能出现闭包问题，也就是作用域内，参数循环，但是函数未执行，当函数执行时，参数已变为最后一项。最终出现的结果就是执行多次最后一次参数。

为了能够解决这个闭包导致的问题，可以通过`立即执行函数`的方式来处理。

## 立即执行函数的写法 ##

(function(i){ 
    	//函数体
    })(i)

将`for`循环中的参数传入到立即执行函数中，然后用参数`i`接收，此时函数体中的参数`i`就是正常的参数了。

由于要延迟打印，则可以通过`setTimeout(()=>{函数体},i*500)`

上面代码中的`$WmsPrint.BomPoint` 就是打印封装的函数：

部分代码如下：

/* 全局打印js */
    //当前配置环境 修改此处切换环境 
    var httpUrl="xxxxxxxx?";
    /* js工具 */
    setQueryConfig=function(data) { 
         var that = this;
         var _str = "";
         for (var o in data) { 
             if (data[o] != -1) { 
                 if (data[o] == undefined) { 
                     window.alert('存在为空的数据');
                     //that.$message({ 
                     // message: "存在为空的数据",
                     // type: 'error'
                     //});
                     return;
                 }
                 _str += o + "=" + data[o] + "&";
             }
         }
         var _str =encodeURI(_str.substring(0, _str.length - 1));
    
    
    try { 		
             window.open(httpUrl + _str, "", "width=400,height=400,menu=no,toolbar=no");
    }
    catch (e) { 
             console.msg("调用出现异常,请用ie或调整到兼容模式下打印" + e.name + e.message);
         }
     }
    var $WmsPrint = { 	
        ///点料打印
           BomPoint:function(data)
    	{ 
           
                     var parmdata = { 
                       Type: "PrintBomLabel",
                       GroupNo: data.GroupNo,              //订单包
                       OrderNo: data.OrderNo,              //订单
                       partNo:data.partNo,                 //型号
                       mfg: data.mfg,                      //品牌
                       package: data.package,              //封装
                       Parameter: data.Parameter,          //参数
                       Designator: data.Designator,        //位号
                       OutSystemRelationId:data.OutSystemRelationId,
                       proNum: data.proNum,              //数量
                       flag: data.flag,                  //是否补料
                       id: data.id,                      //点料Id
               }
                   setQueryConfig(parmdata);		
    	}
    }

上面的打印方法是通过标签纸打印，因为标签纸的尺寸是比较小的，尺寸是`400mmX400mm`，因此再用`window.open`时，通过设置尺寸，来限制打印区域。

如果是要实现`A4`纸的打印，则首先要排版，自己写`dom`样式及数据渲染，然后调用`window.print`的方式来实现。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1600be2a20fc48d3aeecb9ae75bbf007.png