當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2024/1/3 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了网页调用菜鸟打印控件打印电子面单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有一個需求是打印快遞電子面單，試了好多網頁控件因為格式問題都不好用，后來發現菜鳥控件可以直接按標準模板打印的；

菜鳥云打印組件開啟本地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>

總結

以上是生活随笔為你收集整理的网页调用菜鸟打印控件打印电子面单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。