网页调用菜鸟打印控件打印电子面单

有一个需求是打印快递电子面单，试了好多网页控件因为格式问题都不好用，后来发现菜鸟控件可以直接按标准模板打印的；

菜鸟云打印组件开启本地socket服务，接收客户端命令后转发给打印机输出

交互协议 https://open.taobao.com/doc.htm?docId=107014&docType=1

官方示例 http://cdn-cloudprint.cainiao.com/waybill-print/docs/test/test_print.html

下载地址 https://support-cnkuaidi.taobao.com/docs/doc.htm?treeId=409&articleId=108934&docType=1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <button onclick="doPrint('2027200037403746')">打印</button>
</body>
<script>
var socket,defaultPrinter;
socket = new WebSocket('ws://127.0.0.1:13528');

// 打开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);
    };
};

websocket.onmessage = function (event) {   
    var response = eval(event.data);
    if (response.cmd == 'notifyPrintResult') {
        //打印通知
        console.log(response.taskID);
        if(response.taskStatus == 'printed'){
            //打印完成回调 response.printStatus[0].documentID
        }
    }
};

//打印电子面单
function doPrint(waybillNO){
    var request = getRequestObject("print");    
    request.task = new Object();
    request.task.taskID = getUUID(8,10);
    request.task.preview = false;
    request.task.printer = defaultPrinter;
    var documents = new Array();
    
    var doc = new Object();
    doc.documentID = waybillNO;
    var waybill = getWaybillJson(waybillNO);
    doc.contents = waybill;

    documents.push(doc);
    request.task.documents = documents;
    socket.send(JSON.stringify(request));
}

/***
 * 
 * 获取请求的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;
}

/**
 * 请求打印机列表
 * */
function getPrintList(){
    var request = getRequestObject("getPrinters");
    if (socket.readyState===1) {
        console.log(request)
        socket.send(JSON.stringify(request));
    }
}

//获取运单数据 waybillNO 电子面单号
function getWaybillJson(waybillNO){
    var ret = {
        content: [
        {
            "data": {
                "_dataFrom": "waybill",
                "cpCode": "SHENTONG",
                "needEncrypt": false,
                "parent": false,
                "recipient": {
                    "address": {
                        "city": "武汉市",
                        "detail": "东湖路112号",
                        "district": "武昌区",
                        "province": "湖北省"
                    },
                    "mobile": "13100000000",
                    "name": "张三"
                },
                "routingInfo": {
                    "consolidation": {
                        "code": "E30",
                        "name": "中转集"
                    },
                    "routeCode": "327 E70 000",
                    "sortation": {
                        "name": "E70"
                    }
                },
                "sender": {
                    "address": {
                        "city": "太原市",
                        "detail": "太榆路185号",
                        "district": "小店区",
                        "province": "山西省"
                    },
                    "mobile": "15500000000",
                    "name": "李四"
                },
                "shippingOption": {
                    "code": "STANDARD_EXPRESS",
                    "title": "标准快递"
                },
                "waybillCode": "2027200037403746"
            },
            "templateURL": "http://cloudprint.cainiao.com/template/standard/288948/7"
        },
        {
            "data": {
                "tradeInfo": "图书画册 * 3"
            },
            "templateURL": "http://cloudprint.cainiao.com/template/standard/313049/6"
        }
        ]
    };
    
    return ret.content;
}

</script>
</html>