vue中使用快递鸟打印订单
最近在做打印这一块的东西,发货时候打印快递单对接的快递鸟的,这里记录一下使用的小结
一:首先使用快递鸟需要引入 LodopFuncs.js 这个
二:选择要打印的订单,这里可以自由做一些筛选,比如只有待发货的订单才能打印
三:拿到要打印的订单集合后,就下来就要使用Lodop来打印了
1.初始化Lodop ,在使用打印的地方引入
LodopFuncs.js文件
printdata(){//打印this.index=0;
//打印的订单集合的下标,从0开始
this.success=0;
//打印成功的订单数目
this.error=0;
//打印失败的订单数目
this.errorData=https://www.it610.com/article/[];
//打印失败的订单的 订单号或者快递号,自行选择
if(this.orderdata.length==0){this.$message.info('请选择打印的条目!');
return;
}this.LODOP = getLodop();
//初始化Lodopif(!this.LODOP) {
this.$message.info('打印插件未安装,请先下载');
}else{var that=this;
this.LODOP.On_Return = function(TaskID, Value) {
that.startprint();
console.log("开始打印")
};
this.LODOP.SELECT_PRINTER();
}},
2.开始打印,注意 打印的内容一般是通过后台接口返回,后台接口会返回一个 html页面,直接放入使用即可
startprint(){//开始打印let orderid=this.orderdata[this.index];
//这里取的是订单的订单id this.$get("/admin/MianDan/index",{oid:orderid}).then(res => {if(res.success==1){this.LODOP = getLodop();
this.LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
this.LODOP.PRINT_INIT("");
//this.LODOP.ADD_PRINT_BARCODE(71,103,164,119,"QRCode","123456789012");
this.LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", res.data.PrintTemplate);
//设置页面填充内容
// this.LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",1);
this.LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
//设置页面缩放var that=this;
this.LODOP.On_Return = function(TaskID, Value) {
//执行速度太快
setTimeout(function() {that.LODOP = getLodop();
this.LODOP.On_Return = function(TaskID, result) {if(result) {//成功订单
that.success++;
} else {//失败订单
this.errorData.push(res.data.Order.LogisticCode);
that.error++;
}that.index++;
//下一个要打印的if(that.index==that.orderdata.length) {//说明已经打印完毕console.log('========11111=========');
var errorinfo = that.error > 0 ? "失败单号:
"+that.errorData.join('
') : "";
var alertinfo = "已打印完毕-选择了" + that.index + "个订单,成功打印" + that.success + "个面单,失败:" + that.error + "个面单" + errorinfo;
// alert(alertinfo,'',function(){
//console.log('========22222=========');
//that.$emit('clickRelod');
// });
that.$confirm({
content: alertinfo,
okText: "确定",
title: "提示",
okType: "danger",
centered: true,
cancelText: "",onOk: () => {
//成功
that.$emit('clickRelod');
},
onCancel:()=>{
//取消
that.$emit('clickRelod');
}});
return;
}that.startprint();
};
that.LODOP.GET_VALUE('PRINT_STATUS_OK', Value);
}, 1000);
};
this.LODOP.PRINT();
//最后一个打印(或预览、维护、设计)语句}});
},
【vue中使用快递鸟打印订单】以上就是对使用Lodop打印封装的两个方法,总体来说还是很简单的
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 由浅入深理解AOP
- 异地恋中,逐渐适应一个人到底意味着什么()
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 我眼中的佛系经纪人