德邦电子面单模板预览效果 快递鸟API接口

举报
老杨占线 发表于 2020/03/28 16:44:39 2020/03/28
【摘要】 快递鸟现在能支持所有常用快递公司电子面单打印,四通一达,顺丰,邮政等,大部分电商需要用到这个接口,在实际对接快递鸟电子面单的时候很多人都会有疑问:如何解析接口返回的一大段json字符串,使它呈现为我们打印效果的电子面单图片效果?下面我以德邦电子面单请求为例,跟大家分享一下我的经验。

快递鸟现在能支持所有常用快递公司电子面单打印,四通一达,顺丰,邮政等,大部分电商需要用到这个接口,在实际对接快递鸟电子面单的时候很多人都会有疑问:如何解析接口返回的一大段json字符串,使它呈现为我们打印效果的电子面单图片效果?下面我以德邦电子面单请求为例,跟大家分享一下我的经验。

请求电子面单接口成功后,会返回图一数据,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/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 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;">                    杨有才&nbsp;&nbsp;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;">                    钱多余&nbsp;&nbsp;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/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>        <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;">                    杨有才&nbsp;&nbsp;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;">                    钱多余&nbsp;&nbsp;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&nbsp;&nbsp;重量:1kg&nbsp;&nbsp;商品:(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样式显示。

显示效果:

image.png







【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。