window.open打印功能

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

最终效果图：

打印函数的封装

function print(data) {var that = this;var _str = "";for (var o in data) {if (data[o] != -1) {if (data[o] == undefined) {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);}
}

根据上面封装的打印函数，可以看出整体逻辑就是：根据传入的参数，先判断是否有空的数据，如果有空数据，则不能进行打印，如果都是有数据的情况，则进行路径的拼接，然后通过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的方式来实现。