快遞鳥現在能支持所有常用快遞公司電子面單打印，四通一達，順豐，郵政等，大部分電商需要用到這個接口，在實際對接快遞鳥電子面單的時候很多人都會有疑問:如何解析接口返回的一大段json字符串，使它呈現為我們打印效果的電子面單圖片效果？下面我以德邦電子面單請求為例，跟大家分享一下我的經驗。
請求電子面單接口成功后，會返回圖一數據，PrintTemplate參數中包含了電子面單模板的信息，我們要做的就是處理printTemplate參數中的數據，使其以html的面單樣式顯示。
PrintTemplate內容：
<!DOCTYPE html> <html lang="zh-CN"> <!--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 class="x-table"> <tr height="34"> <td> <img height="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAAAuCAMAAAAV6memAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF+/v497IGmZeoIRtGCAMr9NNxyMfRW1d0+u3BsbC/cW6E3NviPDdbhoSX7u3y////s5UbYgAABNpJREFUeNq0WNtipCAMzaByF/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 class="print_paper" height="35"> <tr> <td style="font-size:16px;text-align:left;padding:0;font-weight:bold;overflow:hidden;"> 蘇州市 </td> </tr> </table> --> <table class="print_paper" 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" class="xx10" 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 class="xx14" style="text-align: center; padding: 0;" height="67">收<br />件 </td> <td class="xx14" colspan="7" style="text-align: left;"> <div style="height: 65px; overflow: hidden; font-weight: bold;"> 楊有才 158****6935 廣東省 深圳市 福田區 華寶一號大廈A601</div> </td> </tr> <tr> <td class="xx14" style="text-align: center; padding: 0;">寄<br />件</td> <td class="xx10" colspan="7" style="text-align: left;"> <div style="height: 65px; overflow: hidden;"> 錢多余 139***65433 廣東省 東莞市 南城街道 **</div> </td> </tr> </table> <table class="print_paper" height="85"> <tr> <td class="xx14" 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 class="print_paper" height="71"> <tr> <td class="xx8" 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 class="print_paper" height="56"> <tr> <td width="113" style="padding:0;"> <img height="45" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAAAuCAMAAAAV6memAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF+/v497IGmZeoIRtGCAMr9NNxyMfRW1d0+u3BsbC/cW6E3NviPDdbhoSX7u3y////s5UbYgAABNpJREFUeNq0WNtipCAMzaByF/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 class="print_paper"> <tr height="43"> <td width="18" class="xx14" style="text-align:center; padding:0;">收<br />件</td> <td class="xx10" 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 class="xx14" style="text-align:center; padding:0;">寄<br />件</td> <td class="xx10" 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中添加如下代碼：
//將接口返回的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樣式顯示。
顯示效果：
