快递鸟现在能支持大部分快递公司电子面单打印,顺丰速运、EMS、邮政快递包裹、圆通速递、申通快递、德邦快递、中通快递、韵达速递、百世快递、优速快递、跨越速运、丰网速运、京东快递等,而大部分电商需要用到这个接口,在实际对接快递鸟电子面单的时候,很多人都会有疑问:如何解析接口返回的一大段json字符串,使它呈现为我们打印效果的电子面单图片效果?
下面以德邦电子面单请求为例,跟大家分享一下我的经验。
先注册账号:快递单号查询接口_电子面单_APIKey授权申请–快递鸟账号注册
请求电子面单接口成功后,会返回图一数据,PrintTemplate参数中包含了电子面单模板的信息,我们要做的就是处理printTemplate参数中的数据,使其以html的面单样式显示。
PrintTemplate内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <!DOCTYPE html> < html > <!--100*180,110--> < head > < meta charset = "utf-8" /> < style > * { margin: 0; padding: 0; } .print_paper { font-size: 14px; font-family: "微软雅黑"; border: none; border-collapse: collapse; width: 375px; margin-top: -1px; table-layout: fixed; } .print_paper td { border: solid #000 1px; padding: 0 5px; overflow: hidden; } .x-table { border-collapse: collapse; border-spacing: 0; border: 1px solid #000; width: 375px; } .x-table td { border: 1px solid #000; padding: 0 5px; } .table_first { margin-top: 0; } .print_paper .x1 { font-size: 32px; font-weight: bold; text-align: center; letter-spacing: 5px; line-height: 0.95; font-family: "微软雅黑"; } .print_paper .x4 { font-size: 20px; font-weight: bold; font-family: "微软雅黑"; } .print_paper .xx8 { font-size: 8px; } .print_paper .xx10 { font-size: 12px; } .print_paper .xx12 { font-size: 12px; font-weight: bold; } .print_paper .xx14 { font-size: 12px; font-family: "微软雅黑"; } .print_paper .xx16 { font-size: 16px; font-weight: bold; font-family: "微软雅黑"; } .print_paper .xx18 { font-size: 8px; font-weight: bold; font-family: "微软雅黑"; text-align: right; } .print_paper .xx48 { font-size: 40px; font-weight: bold; text-align: center; font-family: "微软雅黑"; } .no_border { width: 100%; height: 100%; font-size: 14px; } .no_border td { border: none; vertical-align: top; } .fwb { font-weight: bold; } </ style > </ head > < body > < table > < tr height = "34" > < td > < img height = "30" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAAAuCAMAAAAV6memAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF+/v497IGmZeoIRtGCAMr9NNxyMfRW1d0+u3BsbC/cW6E3NviPDdbhoSX7u3ys5UbYgAABNpJREFUeNq0WNtipCAMzaByF/7/b5fcuKhjuw9Nt7MOICHJyUko1D8QAPoA+l0m6t8IwOfwIIr/Xpv/NCGFv9SGrngc//mQzTSWw/N6thFenf88C6/6eN/jo3JMy+GHI8J/6lJ4fD6Lut/YBk8LRBe8vnd8Lup+jBsMvzyMv7y2mjare3vrK0wqvLtyNQ3V1Z88Kf6CR0+9qGsT/nMV+NEjbst5s7dx04bzlt5sO27aDphijs/BGHOaWs7TkJw7SgwGf4wJACWgZBo34UFMIKP9cdz0DU8iQquhTU7g/1E2lP4tVghjeIwvYooGG/yq0C/Zk3Cb3UF126PsCSDu26vsuQgkyYDFocdAXpvLqGwrtTwfes9t7Ta0kZH6oeN7mPkAhCtFRtygnrustoiBu2wnVPvdtMymwZT2FB5/cSVDM5AfT14DsHIFMOah2JRS2NllTVKhHWsp1dGo1QShX5rzd22Q2BcNVdU+QA3HlK0M7Rv5C6pPCWrZKOj9hMCCWx9L4MiTcc+ZgnHWL2DblImduBw3szxVGT67hTpVl6txR8/uhrfMp0vPsUEn80a0rmEPN1M76aWG55ViROkxyEs7CELJ3giCN9j7p+SXGAOy8clJJXaSaTuaBgC3eB8zMzP3cuwN+2TPDpPOxayPLTWAI8rYjcgbCTjaJXHUyJalIMJcDg7BCGhqtwXkKAstIpjo7cCEe5raLgRjC8MT9KjXmtKZGAQ30g44ckVCcKIhAI0jDSGtsI9b2C7Z1qZYS5TwnbSh9/BNPE5WRbVtqvEJ4d2Yt2ASOiGZFrbzwpGuRoGnaL2Sx4Ng7Cz5cWsMzmFrtI9fg6MKsDF8wLgYYxbqaBKE7BKojXCr2VfxFDTGXTtelqcJmBQbJe/YOUOIDPnTasJfiPgmLW9qaIdmLCf4mm1MZ4RC0l17tqlaR0d4c6Vnnmtlmpwy1bapkjX7gnCOVQXDTqO2cQZUfxWx9ji8kFnnuXMuAKO4tNhwJgmcGMzs9YRlQ2yDpUMT5x+CD+i5EIQhCjz1QSnprcVJEUR/SNiwEC/aYOn0tEP3vfdWp6QiHckqsXUktdAjUXc+Y/sRO5H3u7a1pZqJ6xjNqVDtLWwavUApuTJJFt43ZNs+tMFjh+6r3ugw4TjM7g7JfXPkn0tL0nDDYbNdW763ujBM05LcsRzgjsid0ohgtDJJKfyN6oJqu8RtmAZzZ67ZhmE7RULs2Mew0Rhra9np4sg2RXTusIKuV/2oV5zeJyC6QCsuWpOxlbKKY95V+LC1KHJCLLK0VLSN/qdegta1KatGzLJSnHM54An2nAIOmTqTR4Buj/Q9N23iN69UPIo6cBZh3IkaGX22Uh+KFQ7759qzDdMZOqts3K2u2rTnOma+6rfFoiWYqw3t6U4KYKHiZuT9OTwj29q/LJGYTOuE5ZfL7OByqm2By7/AshjRVnueRH5TSfJBG3Y+czMy8xl0dBEtQZkTq0jhpuW9ne6h0mtV7oQmyL/+PWF0DcCGaNjOOeVKpNsNh5lvUhyp3knSXn1mvpoi6StzDtuYAdtVCJPNQojnkGJji5/lY9Gdjk2r9sTABoEPvhPPMgLXLnD++18AoBcL+H67Br0t9af15g6/uLDDdEG9Ms/6Hoy2ezoYPPyZB75er/8JMADyUaClcBnaxwAAAABJRU5ErkJggg==" alt = "" /> </ td > < td width = "60" style = "font-size:13px;font-family:Microsoft YaHei;background-color: #000000;text-align:left;display: none" >< div >< font color = "#FFFFFF" >< b >代收货款</ b ></ font ></ div ></ td > < td width = "120" style = "border: 1px solid #151515" ></ td > </ tr > < tr height = "56" > < td colspan = "4" style = "font-size:32px; font-weight:bold; text-align:left;letter-spacing:5px;line-height:0.95;font-family:Microsoft YaHei;" >东莞市—深圳市</ td > </ tr > </ table > <!-- <table height="35"> <tr> <td style="font-size:16px;text-align:left;padding:0;font-weight:bold;overflow:hidden;"> 苏州市 </td> </tr> </table> --> < table height = "113" > < tr > < td colspan = "8" style = "font-size: 16px; text-align: left; padding: 0; font-weight: bold; overflow: hidden; height: 35" > 苏州市</ td > < td width = "90" rowspan = "4" style = "vertical-align: top; padding: 0;" > < div style = "border-bottom: 1px solid #000; text-align: center; height: 22px;" >服务信息</ div > < div style = "display: None" >声明价值:¥0元</ div > < div style = "display: none" >代收金额:¥0元</ div > 付款方式:寄付月结< br /> < div style = "display: none" >签单返回:${ShowSignType}</ div > </ td > </ tr > < tr > < td style = "text-align: center; padding: 0;" height = "67" >收< br />件 </ td > < td colspan = "7" style = "text-align: left;" > < div style = "height: 65px; overflow: hidden; font-weight: bold;" > 杨有才 158****6935 广东省 深圳市 福田区 华宝一号大厦A601</ div > </ td > </ tr > < tr > < td style = "text-align: center; padding: 0;" >寄< br />件</ td > < td colspan = "7" style = "text-align: left;" > < div style = "height: 65px; overflow: hidden;" > 钱多余 139***65433 广东省 东莞市 南城街道 **</ div > </ td > </ tr > </ table > < table height = "85" > < tr > < td style = "text-align:center; font-size:20px;letter-spacing:5px;" > < div >< img width = "270" height = "56" src = "data:image/gif;base64,R0lGODlhDgE4APAAAAAAAP///ywAAAAADgE4AEAI/wADCBxIsKDBgwgTAlgIQOBCggwZQpQYIGJEhxQtZmxY8GFFjhM9YpyIUORHjxc7ctSI0aTJkQNThtzYEmTCmzhz6tzJMyZNnzJPrtQ4FCVRmCQ/Ggzq0mbSmlBV1jTadKnNoFOHRu3JtavXrimbMt3IUmhWo1aRAr3KtiRbqk6VCoX71OdMq2GLxv3Kty/fvDPF6s0LF7BUuXftKk67dqvismMZO84KE6vfy5h1GqbceC7ZwT+TvjS7GPHhqJYL662rNrXFyhQzy559cLPnxERXe0Z7eHTk0nUJx1Xt2Pfb4a/lWqbNHLPtsqiPks6tFjbetsBLC2cMObbp1t450/9tTj7z8+TRu6vmLRp51ezgx7ffnl3wdd7Ly+vveX7set3Ufaece9hVp91n3CX3W3Dh3TbgaPtFqFloDqan4Ge2WafSewbGp9t8CNZ33H1akSbhiROyV+F00gmX4YDXMegWbg0SZ6KA9m34U34o9tiZYDkG6CKFGiYG3ow/1ghaccgZuRZ+DfooJYuBjbgbgC02iaN3HJ7GonHicanlZA7KN+WZ/Yn5n4UvqsgkaweaCRt9BuZY5Zx7nYlimkFmueaWdYoJp4dk2rhgnARCCaGeJ/JppZAYEgmjjjLW9qiSYXZJqI6K5slohI7SqB5obk7qpKaIFrrkjWB2dueDnn7/ql+oSY56VontxXggkhYmSCegrj5ZIo+ylkcrmyFCmqCuR1oqqpa2iuhkmGQWu9+xX174Z6vGdblon9xqW2CqnA4bpbXGUghdtvQp2xuBlUqWra8hBjptmR+iC6q66LGbbJbLUrqrs7VCKy6cdgqLp76N8usfqVh2F/Cp4zIoJ6xmtqqqYcQyLBu2Q47nbq4CNyvvr3hmPOaN1LLscXMgRyoywO8ya9q3l4b7q8YuS+zyy7TFvK3MuD4G78An12v0ziu7xvG5QJvnsJoQI1vq1YLCd7PSKefLs9M7Qh31ZUJX7S/WgXqbJ7gGM510t2EvOjbZU7PdLs0kUzzo1hcb/5q1xYmaK/fcfZV9q9VFFxksqpu6lmnFfAe+MOFB153zwVfau6XavM77rttegt0p5ZWruG7IEV848eKQN44pvqgm3HLHpHNleOZnJ24q63uzTa/Kb0sOa+0fW/7s3T7nzbvWvn+u9NdKPj048fwZXzDyqtdc8tado4yx101HH3es1PN0O6RDr/4m85f/Dn7wJE5efuHWI24/sHDHGzrX368PePzDmx/9TNcv1N0vXDZjXORU9TiEWelVFxNg9Qj4sMPlTnP5Q9r++raqQ20KgvmSoO3qd8ESInB7CmweiIC3QeFFUIQpKtrpiHZAgyWwdQvsWQf/Ri4QVguGOTmfn//MdkK9se9Z7vNfDxUWQCBOUIYFpKEJbYhCHKpwac8LH9xG58Qneshu/0qe0W7Yu/Y5j4X/K5f8uhjDL14Oe23S3aFwhsQzvq+FAHwhGy1FQapZ0ID4O5rJ8KjDBkorWLMT2x5p9Koapk97RuxQDh0HO8jJDl8/XKTAgPTGMGZPeUqkY8GSyCotujCEmuQjFCuIO0AWcXmSvGLXlPhBJuoxldFp5BQfCcpSlrGOK7xjGn34M1wmSZeulOIrQ7k2MwaTljkkJu00KcRojWyMVfzlKO0IzUv6bJqLrCbmrqk4ZnaPf36L3QNtiUpjHpOJjiQiFSMpINfpLIvwU2MT3bkoyeOAcWZiLKcvj7jNZw50mOzMpDHFCUdJYY1zBOsVNw+6xEROTz8BAQA7" /></ div > < div style = "font-size: 12pt; font-weight: bold;" > 9098086850 </ div > </ td > </ tr > </ table > < table height = "71" > < tr > < td width = "166" style = "padding:0;" >快件送达收件人地址,经收件人或收件人(寄件人)允许的代收人签字,视为送达,您的签字代表您已验收此包裹,并以确定商品信息无误,包装完好,没有划痕,破损等。</ td > < td width = "132" style = "padding:0;" >签收人:< br />< br />时间:</ td > < td width = "71" style = "padding:0;" > [二维码]</ td > </ tr > </ table > < table height = "56" > < tr > < td width = "113" style = "padding:0;" > < img height = "45" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAAAuCAMAAAAV6memAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF+/v497IGmZeoIRtGCAMr9NNxyMfRW1d0+u3BsbC/cW6E3NviPDdbhoSX7u3ys5UbYgAABNpJREFUeNq0WNtipCAMzaByF/7/b5fcuKhjuw9Nt7MOICHJyUko1D8QAPoA+l0m6t8IwOfwIIr/Xpv/NCGFv9SGrngc//mQzTSWw/N6thFenf88C6/6eN/jo3JMy+GHI8J/6lJ4fD6Lut/YBk8LRBe8vnd8Lup+jBsMvzyMv7y2mjare3vrK0wqvLtyNQ3V1Z88Kf6CR0+9qGsT/nMV+NEjbst5s7dx04bzlt5sO27aDphijs/BGHOaWs7TkJw7SgwGf4wJACWgZBo34UFMIKP9cdz0DU8iQquhTU7g/1E2lP4tVghjeIwvYooGG/yq0C/Zk3Cb3UF126PsCSDu26vsuQgkyYDFocdAXpvLqGwrtTwfes9t7Ta0kZH6oeN7mPkAhCtFRtygnrustoiBu2wnVPvdtMymwZT2FB5/cSVDM5AfT14DsHIFMOah2JRS2NllTVKhHWsp1dGo1QShX5rzd22Q2BcNVdU+QA3HlK0M7Rv5C6pPCWrZKOj9hMCCWx9L4MiTcc+ZgnHWL2DblImduBw3szxVGT67hTpVl6txR8/uhrfMp0vPsUEn80a0rmEPN1M76aWG55ViROkxyEs7CELJ3giCN9j7p+SXGAOy8clJJXaSaTuaBgC3eB8zMzP3cuwN+2TPDpPOxayPLTWAI8rYjcgbCTjaJXHUyJalIMJcDg7BCGhqtwXkKAstIpjo7cCEe5raLgRjC8MT9KjXmtKZGAQ30g44ckVCcKIhAI0jDSGtsI9b2C7Z1qZYS5TwnbSh9/BNPE5WRbVtqvEJ4d2Yt2ASOiGZFrbzwpGuRoGnaL2Sx4Ng7Cz5cWsMzmFrtI9fg6MKsDF8wLgYYxbqaBKE7BKojXCr2VfxFDTGXTtelqcJmBQbJe/YOUOIDPnTasJfiPgmLW9qaIdmLCf4mm1MZ4RC0l17tqlaR0d4c6Vnnmtlmpwy1bapkjX7gnCOVQXDTqO2cQZUfxWx9ji8kFnnuXMuAKO4tNhwJgmcGMzs9YRlQ2yDpUMT5x+CD+i5EIQhCjz1QSnprcVJEUR/SNiwEC/aYOn0tEP3vfdWp6QiHckqsXUktdAjUXc+Y/sRO5H3u7a1pZqJ6xjNqVDtLWwavUApuTJJFt43ZNs+tMFjh+6r3ugw4TjM7g7JfXPkn0tL0nDDYbNdW763ujBM05LcsRzgjsid0ohgtDJJKfyN6oJqu8RtmAZzZ67ZhmE7RULs2Mew0Rhra9np4sg2RXTusIKuV/2oV5zeJyC6QCsuWpOxlbKKY95V+LC1KHJCLLK0VLSN/qdegta1KatGzLJSnHM54An2nAIOmTqTR4Buj/Q9N23iN69UPIo6cBZh3IkaGX22Uh+KFQ7759qzDdMZOqts3K2u2rTnOma+6rfFoiWYqw3t6U4KYKHiZuT9OTwj29q/LJGYTOuE5ZfL7OByqm2By7/AshjRVnueRH5TSfJBG3Y+czMy8xl0dBEtQZkTq0jhpuW9ne6h0mtV7oQmyL/+PWF0DcCGaNjOOeVKpNsNh5lvUhyp3knSXn1mvpoi6StzDtuYAdtVCJPNQojnkGJji5/lY9Gdjk2r9sTABoEPvhPPMgLXLnD++18AoBcL+H67Br0t9af15g6/uLDDdEG9Ms/6Hoy2ezoYPPyZB75er/8JMADyUaClcBnaxwAAAABJRU5ErkJggg==" alt = "" /> </ td > < td style = "text-align:center;padding:0;" > < div >< img width = "176" height = "30" src = "data:image/gif;base64,R0lGODlhsAAeAPAAAAAAAP///ywAAAAAsAAeAEAI/wADCBxIsKDBgwgPAgAQgGHDhQIhLpTIcGLFgRcjOtxIcGNFhw0ffoyIUSNGiQ8TqlzJsqXLlyY9ehQ50mJIkiAh3gS5cyROiiSD6hQZcijMo0iTtkRJNKVNikyLnhTaMWZOojqvptR40ajSr2CTMp1oFejTkjk53hTqsyjQtTO5ug1Lt67LsVk/miV7NS3Vkk77vtU6lO9Wu4gTT5VZtqZhnFN3Vg2MdjDgwii9Kt4MFu/Mp3ozSjUp+XJbvVsJp+3Kk7NrsRnJBt4bVXTWoGwPo76dW27b18Bhem482zZctTw/C/ap+iTr4NBfDi9OvW9ktbkLY8UeF+vh6OARTv+H6rj28b/Zl6c27Xxu+PcGx4eujvY67p66t+Publgz/PDy0UQfZKRhh592fHFHmnf+/RddgKAJaF2B9ylXGXPs+fadgwDGlpeE80243loHqscbfho2yCFwECYoYX0UkmjhTxj2xmBrK0LXIm3G+VVaeheOiOKNOb63Y3k92iejVUGeyF9mOBb52pEDjjZickzSKOSTz0n5oIfK8QjXeT+W2KSCukHp5Zc9hYnkmD4aOKNbNQ7ZX5RrKkYleXAqiSVlWjq54J15BrdniDBeOdlbdG45qJqFTgkmcXyKyNufjO6GJmZdRsrZoS8SqCh7CFpmI6GefjppdYiKeumip+lBN2aanaaaGKhnuYocrPm5OCun7tl666qVtmrlq6SauOlqwQprF66PHbtrsmfu92itztIFrXlxVphlo4LS2mx4AQEAOw==" /></ div > < div >9098086850</ div > </ td > </ tr > </ table > < table > < tr height = "43" > < td width = "18" style = "text-align:center; padding:0;" >收< br />件</ td > < td style = "text-align:left;" width = "270" > < div style = "height:47px;overflow:hidden;" > 杨有才 158****6935 广东省 深圳市 福田区 华宝一号大厦A601 </ div > </ td > < td width = "71" rowspan = "2" style = "padding:0;" > [二维码]</ td > </ tr > < tr height = "43" > < td style = "text-align:center; padding:0;" >寄< br />件</ td > < td style = "text-align:left;" > < div style = "height:47px;overflow:hidden;" > 钱多余 139***65433 广东省 东莞市 南城街道 ** </ div > </ td > </ tr > < tr height = "80" > < td colspan = "3" style = "text-align:left;height:70px;overflow:hidden;" > < div style = "font-size:10pt;overflow:hidden;" >数量:1 重量:1kg 商品:(N95 防护口罩)</ div > < div style = "vertical-align:bottom; text-align:right; font-weight: bold;" >已检视</ div > </ td > </ tr > </ table > </ body > </ html > |
这里提供两个方法供大家参考:
1、 使用C#开发语言,将printTemplate内容放在html页面的div层中显示:
(1)、在显示信息的*.aspx页面中定义一个id为“printHTML”的div层。
<div runat="server" id="printHTML">
</div>
(2)、在*.aspx.cs中添加如下代码:
1 2 3 4 5 6 7 8 9 10 | //将接口返回的json字符串反序列化。 //需要引用using Newtonsoft.Json; JObject result = (JObject)Newtonsoft.Json.JsonConvert.DeserializeObject(str); //获取printTemplate的值 var html = result[ "PrintTemplate" ]; if (html != null ) { //将html 中的内容放到printHTML中显示 printHTML.InnerHtml = html.ToString(); } |
2、 使用jquery进行显示。
直接使用:
$('#printHTML').html(html)
使用上述两种方法均可以将返回的数据处理成html样式显示。
显示效果:
![](https://i-blog.csdnimg.cn/blog_migrate/0102df201aa50fe3d4afcce1d37ee0fd.png)