快递鸟现在能支持大部分快递公司电子面单打印,顺丰速运、EMS、邮政快递包裹、圆通速递、申通快递、德邦快递、中通快递、韵达速递、百世快递、优速快递、跨越速运、丰网速运、京东快递等,而大部分电商需要用到这个接口,在实际对接快递鸟电子面单的时候,很多人都会有疑问:如何解析接口返回的一大段json字符串,使它呈现为我们打印效果的电子面单图片效果?

下面以德邦电子面单请求为例,跟大家分享一下我的经验。

先注册账号:快递单号查询接口_电子面单_APIKey授权申请–快递鸟账号注册

请求电子面单接口成功后,会返回图一数据,PrintTemplate参数中包含了电子面单模板的信息,我们要做的就是处理printTemplate参数中的数据,使其以html的面单样式显示。

PrintTemplate内容:

<!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中添加如下代码:

//将接口返回的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样式显示。

显示效果:

java获取顺丰电子面单信息_javascript