vue中使用快递鸟打印订单

最近在做打印这一块的东西，发货时候打印快递单对接的快递鸟的，这里记录一下使用的小结

一：首先使用快递鸟需要引入 LodopFuncs.js 这个

二：选择要打印的订单，这里可以自由做一些筛选，比如只有待发货的订单才能打印

三：拿到要打印的订单集合后，就下来就要使用Lodop来打印了

1.初始化Lodop ，在使用打印的地方引入

LodopFuncs.js文件

printdata(){//打印this.index=0;//打印的订单集合的下标，从0开始this.success=0;//打印成功的订单数目this.error=0;//打印失败的订单数目this.errorData=[];//打印失败的订单的 订单号或者快递号，自行选择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 ? "<b>失败单号</b>：<br>"+that.errorData.join('<br>') : "";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();//最后一个打印(或预览、维护、设计)语句}});},

以上就是对使用Lodop打印封装的两个方法，总体来说还是很简单的

vue中使用快递鸟打印订单相关推荐

在vue中实现单页面打印之cdn引入打印
虽然网上挺多的但我还喜欢自己的,先来看看原生javascript实现的打印上代码: 1.要打印的东西 2.预览打印 <!doctype html> <html> <hea ...
Vue 中Lodop 实现批量打印
打印初始化放到for循环外,遍历的数组长度有多少就打印多少, for循环里面还是 this.LODOP = getLodop(); 这些,只是把初始化提到外面,打印预览也提到for循环外
Vue中好用的打印组件 vue-print-nb
首先下载包 npm i vue-print-nb 按需引入页面并使用, 这个组件的好处是可以保留已有的样式, 不用写两套css (如果你使用的是print.js, 你是需要写两套css的) <d ...
快递鸟电⼦⾯单批量打印流程与注意事项
快递鸟作为全球最⼤的第三⽅物流接⼝服务商,电⼦⾯单可⼀次性对接40家主流快递快运公司接⼝,免费试用,调⽤接⼝时快递鸟会向物流公司请求单号,并实时返回,可直接打印电⼦⾯单发货. 一.支持快递快运公司编码 ...
快递鸟单号查询接口电子面单API接入流程（全）
电商平台和小程序都有物流模块,需要查询物流轨迹状态,一家家去对接顺丰.申通.中通.圆通.韵达.百世.邮政.EMS.京东.天天.德邦.安能等快递单号查询接口和电子面单API接口,是非常麻烦的,快 ...
圆通电子面单账户开通申请流程（快递鸟示例）
电子面单下单: 5.3.1.请求接口之前需要先实名认证,开通相关会员服务,否则会请求失败并返回提示"未申请开通接口": 5.3.2.接口开发需下载"快递鸟接口技术文档&q ...
python调用api应用接口_第三方免费快递物流查询接口平台（快递鸟）api接口调用...
随着网购的发展,快递业也随之壮大.快递查询接口对接的需求量也越来越大,下面是对免费快递接口做的整理,并附上调用流程,分享给大家. 项目开发中,有些需求难免会用到关于快递的一些Api接口:本篇主要介绍的 ...
对接极兔速递物流开放平台API接口指南-快递鸟
什么是快递鸟? 快递鸟是深圳快金数据的一个接口服务品牌,整合1600多家国内外快递物流公司系统,形成统一标准接口,为电商平台.自营商城.打单工具.WMS仓储系统.APP等需要发货的场景,提供专业的物流 ...
通过快递鸟如何接入中通快递电子面单
一.接入前准备(TO商家业务人员) 1.申请快递鸟用户ID和API key 1.1登录快递鸟官网注册页面http://www.kdniao.com/reg注册快递鸟账号: 1.2登录快递鸟用户管理后台 ...
C#-快递鸟电子面单打印API
以下是快递鸟电子面单接口对接demo (1).只支持Json格式.接口指令1007. (2).订单编号(OrderCode)不可重复提交,重复提交系统会返回具体错误代码. (3).接口支持:顺丰(SF ...

vue中使用快递鸟打印订单

vue中使用快递鸟打印订单相关推荐

最新文章

热门文章