H5实现打印电子面单（淘宝菜鸟物流）

最新推荐文章于 2024-07-10 09:41:19 发布

刘斩仙的笔记本

最新推荐文章于 2024-07-10 09:41:19 发布

阅读量9.2k

点赞数 2

分类专栏： javascript 文章标签：电子面单打印 js

本文链接：https://blog.csdn.net/qq_25252769/article/details/89449331

版权

javascript 专栏收录该内容

21 篇文章 5 订阅

订阅专栏

介绍：为了对接菜鸟物流，写的测试demo，最终需要实现and design pro版本
效果如图：
在这里插入图片描述
第一步：

先看文档=>菜鸟文档：接口文档

第二步：
下载云打印客户端：打印组件，安装打开就完了
在这里插入图片描述
第三步：
配置打印机：装驱动，设置为默认打印机（面单打印机），完事儿！

第四步：

注意：
如遇打印报【渲染失败】、【出现打印提示框】或者【打印暂停】，
1.重装一下驱动，
2.重启电脑，
3.cainiao打印组件中，选择工具-清楚缓存，然后再选择-重启cainiao组件（我试了1和2都没解决，使用3解决的）

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div onclick="getdd()">
			打印
		</div>
	</body>
	<script>var socket;
var getdd
var jsonObject = {
	content: {
		"data": {
			"_dataFrom": "waybill",
			"cpCode": "YUNDA",
			"needEncrypt": false,
			"parent": false,
			"recipient": {
				"address": {
					"city": "南京市",
					"detail": "xxx路333113号",
					"district": "南宁区",
					"province": "江苏省"
				},
				"mobile": "15023533341256",
				"name": "王大鹏",
				"phone": "150233333541256"
			},
			"routingInfo": {
				"consolidation": {
					"code": "J210039",
					"name": "南京市内包"
				},
				"origin": {
					"code": "455387",
					"name": "河南安阳公司安钢南分部"
				},
				"routeCode": "B003 000",
				"sortation": {
					"name": "470"
				}
			},
			"sender": {
				"address": {
					"city": "安阳市",
					"detail": "安钢六区",
					"district": "殷都区",
					"province": "河南省"
				},
				"mobile": "02221-61223829958",
				"name": "23424234项目组",
				"phone": "032321-3234525235"
			},
			"shippingOption": {
				"code": "STANDARD_EXPRESS",
				"title": "标准快递"
			},
			"waybillCode": "3738460008834"
		},
		"signature": "MD:C1b9cw46jbUP6/O2rl77Vg==",
		"templateURL": "http://cloudprint.cainiao.com/template/standard/401/177"
	}
}
var num= [{
            waybillCode:"3738460008834",
            printData:{
                data:'',
                templateURL:'http://cloudprint.cainiao.com/template/standard/101/123'
            },
            objectId:"1"
    	}]
var defaultPrinter
//备注：webSocket 是全局对象，不要每次发送请求丢去创建一个，做到webSocket对象重用，和打印组件保持长连接。
//		function doConnect()
//		{
		    socket = new WebSocket('ws://127.0.0.1:13528');
		    //如果是https的话，端口是13529
		    //socket = new WebSocket('wss://localhost:13529');
		    // 打开Socket
		    socket.onopen = function(event)
		    {
		    	getPrintList()//打印机列表
		        // 监听消息
		        socket.onmessage = function(event)
		        {
		            console.log('Client received a message',event);
		            console.log(JSON.parse(event.data).defaultPrinter)
		            defaultPrinter = JSON.parse(event.data).defaultPrinter
		        };
		        // 监听Socket的关闭
		        socket.onclose = function(event)
		        {
		            console.log('Client notified socket has closed',event);
		        };
		    };
//		}
//		doConnect()
getdd = function(){
					doPrint(defaultPrinter,num)
				}

		/***
		 * 
		 * 获取请求的UUID，指定长度和进制,如 
		 * getUUID(8, 2)   //"01001010" 8 character (base=2)
		 * getUUID(8, 10) // "47473046" 8 character ID (base=10)
		 * getUUID(8, 16) // "098F4D35"。 8 character ID (base=16)
		 *   
		 */
		function getUUID(len, radix) {
		    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
		    var uuid = [], i;
		    radix = radix || chars.length; 
		    if (len) {
		      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
		    } else {
		      var r;
		      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
		      uuid[14] = '4';
		      for (i = 0; i < 36; i++) {
		        if (!uuid[i]) {
		          r = 0 | Math.random()*16;
		          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
		        }
		      }
		    }
		    return uuid.join('');
		}
		/***
		 * 构造request对象
		 */
		function getRequestObject(cmd) {
		    var request  = new Object();
		    request.requestID=getUUID(8, 16);
		    request.version="1.0";
		    request.cmd=cmd;
		    return request;
		}
		/***
		 * 获取自定义区数据以及模板URL
		 * waybillNO 电子面单号
		 */
		function getCustomAreaData(waybillNO){
		    //获取waybill对应的自定义区的JSON object，此处的ajaxGet函数是伪代码
		    //var jsonObject = {jiade:1234}//ajaxGet(waybillNO);
		    var ret = new Object();
		    ret.templateURL=jsonObject.content.templateURL;
		    ret.data=jsonObject.content.data;
		    return ret;
		}
		/***
		 * 获取电子面单Json 数据
		 * waybillNO 电子面单号
		 */
		function getWaybillJson(waybillNO){
		    //获取waybill对应的json object，此处的ajaxGet函数是伪代码
		   // var jsonObject = {jiade:1234}// ajaxGet(waybillNO);
		    return jsonObject;
		}
		/**
		 * 请求打印机列表demo
		 * */
		function getPrintList(){
			var request  = getRequestObject("getPrinters");
		
			if (socket.readyState===1) {
				console.log(request)
		        socket.send(JSON.stringify(request));
		    }
		}
		/**
		 * 弹窗模式配置打印机
		 * */
		function getPrintInPop(){
			var request  = getRequestObject("printerConfig");
		
			if (socket.readyState===1) {
				console.log(request)
		        socket.send(JSON.stringify(request));
		    }
		}
		
		
		/**
		 * 打印电子面单
		 * printer 指定要使用那台打印机
		 * waybillArray 要打印的电子面单的数组
		 */
		
		function doPrint(printer, waybillArray)
		{
		    var request = getRequestObject("print");    
		    request.task = new Object();
		    request.task.taskID = getUUID(8,10);
		    request.task.preview = false;
		    request.task.printer = printer;
		    var documents = new Array();
		    for(i=0;i<waybillArray.length;i++) {
		         var doc = new Object();
		         doc.documentID = waybillArray[i];
		         var content = new Array();
		         var waybillJson = getWaybillJson(waybillArray[i]);
		         var customAreaData = getCustomAreaData(waybillArray[i]);
		         content.push(waybillJson,customAreaData);
		         doc.contents = content;
		         documents.push(doc);
		    }
		    request.task.documents = documents
		    socket.send(JSON.stringify(request));
		}
		/**
		 * 响应请求demo
		 * */
		socket.onmessage = function (event) {   
		    var response = eval(event.data);
		    if (response.cmd == 'getPrinters') {
		        getPrintersHandler(response);//处理打印机列表
		    } else if (response.cmd == 'printerConfig') {
		        printConfigHandler(response);
		    } 
		};
		
		
		
		
	</script>
</html>

备注：修改纸张大小，只能从菜鸟后台配置一联二联三联（https://fahuo.cainiao.com），前端操作不了。
结尾：测试版，对接and design pro 运行成功，等完善了再分享。

刘斩仙的笔记本

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
3
评论
H5实现打印电子面单（淘宝菜鸟物流）

介绍：为了对接菜鸟物流，写的测试demo，最终需要实现and design pro版本效果如图：第一步：先看文档=>菜鸟文档：接口文档第二步：下载云打印客户端：打印组件，安装打开就完了第三步：配置打印机：装驱动，设置为默认打印机（面单打印机），完事儿！第四步：源代码：<!DOCTYPE html><html> <head> ...
复制链接

扫一扫