打印电子面单

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>迷你柜商品</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

<body>
  <div class="a-parent">
  </div>
  <button id="print">打印</button>
</body>
<script>
var a = document.querySelector('.a-parent');
var btn = document.querySelector('#print');
var json = {
  "EBusinessID": "1290095",
  "Success": true,
  "Order": {
    "OrderCode": "YD201703011102105952",
    "ShipperCode": "YD",
    "LogisticCode": "4060002543597",
    "MarkDestination": "京-朝阳 ",
    "OriginCode": "406000254359757715",
    "OriginName": "VIP客户项目三组",
    "SortingCode": "qVbEMPZb8Wq+ZKTUQRntt9++3al6cWymci4AwZGd3DKv6+S09kD6wG86tn1o4aFmtSxpufMWMk2Dcp0ZzlOvPQ==",
    "PackageCode": "0",
    "PackageName": " ",
    "KDNOrderCode": "KDN170602110021226449"
  },
  "Reason": "成功",
  "ResultCode": "100",
  "PrintTemplate": "<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<!--100*210,105-->\r\n<head>\r\n    <meta charset=\"utf-8\"/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE =8\" />\r\n    <style>\r\n        * { margin: 0; padding: 0; }\r\n        .print_paper { font-size:14px; border:none; border-collapse: collapse; width: 372px; margin-top:-1px; table-layout:fixed; }\r\n        .print_paper td{ border: solid #000 1px; overflow: hidden; }\r\n        .print_paper .xx10 { font-size:10px; }\r\n        .no_border td{ border:none; vertical-align: top;}\r\n        .print_paper .pt5{ padding-top: 5px;}\r\n        .fhei{font-family: 'SimHei';}\r\n        .far{font-family: airal}\r\n        .f24{ font-size:24pt; }\r\n        .f20{ font-size:20pt; }\r\n        .f18{ font-size:18pt; }\r\n        .f14{ font-size: 14pt;}\r\n        .f12{ font-size: 12pt;}\r\n        .f10{ font-size: 10pt;}\r\n        .f8{ font-size: 8pt;}\r\n        .f7{ font-size: 7pt;}\r\n        .b{ font-weight: bold;}\r\n        .tc{ text-align: center; }\r\n        .vt{ vertical-align: top; }\r\n        .l{ float: left;}\r\n        .ohh{ white-space:nowrap;overflow: hidden;}\r\n        .print_paper .wba{ word-break:break-all; }\r\n        .w1{ width: 100%; }\r\n        .lh12{ line-height: 12px; }\r\n        .pp-bn td{ border: none; }\r\n        .t-bn { border: 1px solid #000; }\r\n        .t-bn td{ border: none; }\r\n        .print_paper .br{border-right:1px solid #000;}\r\n        .btw7{border-top:7px solid #000; }\r\n        .pt5{ padding-top: 5px;}\r\n        .pl5{ padding-left: 5px; }\r\n        .pl10{ padding-left: 10px; }\r\n        .pl20{ padding-left: 20px; }\r\n        .pr10{ padding-right: 10px; }\r\n        .pl80{ padding-left: 80px;}\r\n    </style>\r\n</head>\r\n<body class=\"fhei\">\r\n<table class=\"print_paper t-bn\">\r\n    <tr height=\"170\">\r\n        <td class=\"vt\">\r\n            <table class=\"w1 print_paper\">\r\n                <tr class=\"ohh\" height=\"60\">\r\n                    <td class=\"ohh f8 lh12 pt5 pl5\" width=\"209\">\r\n                        <div>始发网点：VIP客户项目三组</div>\r\n                        <div>姓名： Taylor</div>\r\n                        <div>电话：15018442396</div>\r\n                        <div>发件公司： </div>\r\n                        <div>发件地址：明珠路73号</div>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n\r\n            <table class=\"w1 print_paper\">\r\n                <tr  height=\"70\">\r\n                    <td class=\"ohh f10 pt5 pl5 lh12 vt\" width=\"50\">\r\n                        <div>送达 </div>\r\n                        <div>地址：</div>\r\n</td>\r\n                    <td class=\"lh12 b f10\">\r\n                        <div>收件人：Yann</div>\r\n                        <div>电话：15018442396</div>\r\n                        <div>收件公司： </div>\r\n                        <div class=\"wba\">\r\n                            收件地址：北京北京朝阳区三里屯街道雅秀大厦\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n            <table class=\"w1 print_paper\">\r\n                <tr  height=\"40\">\r\n                    <td class=\"f14 b pl5\" width=\"230\">\r\n                          \r\n                    </td>\r\n                    <td style=\"text-align:center\">\r\n                        <img class=\"r\" src=\"data:image/gif;base64,R0lGODlhLgAgAPcAAAAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMrADMrMzMrZjMrmTMrzDMr/zNVADNVMzNVZjNVmTNVzDNV/zOAADOAMzOAZjOAmTOAzDOA/zOqADOqMzOqZjOqmTOqzDOq/zPVADPVMzPVZjPVmTPVzDPV/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YrAGYrM2YrZmYrmWYrzGYr/2ZVAGZVM2ZVZmZVmWZVzGZV/2aAAGaAM2aAZmaAmWaAzGaA/2aqAGaqM2aqZmaqmWaqzGaq/2bVAGbVM2bVZmbVmWbVzGbV/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5krAJkrM5krZpkrmZkrzJkr/5lVAJlVM5lVZplVmZlVzJlV/5mAAJmAM5mAZpmAmZmAzJmA/5mqAJmqM5mqZpmqmZmqzJmq/5nVAJnVM5nVZpnVmZnVzJnV/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wrAMwrM8wrZswrmcwrzMwr/8xVAMxVM8xVZsxVmcxVzMxV/8yAAMyAM8yAZsyAmcyAzMyA/8yqAMyqM8yqZsyqmcyqzMyq/8zVAMzVM8zVZszVmczVzMzV/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8rAP8rM/8rZv8rmf8rzP8r//9VAP9VM/9VZv9Vmf9VzP9V//+AAP+AM/+AZv+Amf+AzP+A//+qAP+qM/+qZv+qmf+qzP+q///VAP/VM//VZv/Vmf/VzP/V////AP//M///Zv//mf//zP///wAAAAAAAAAAAAAAACH5BAEAAPwALAAAAAAuACAAAAj+AAEA2Ddwn8GCCAUSRHhQocKFBhcOnChwYkSCBxtSzCgRoseOFB1eZAiSZEWPD0FKtBjRpEOXGz+eDMmSY8KYN1EWVFmxJsafM2HqbCmy50+bGlEmfZhy5sqjQJcKZbrTqdGdUUvafNmQqMWrI7filNp16VOsU9OW5em0pVilWmUWbYs0bk6qXjGCdQuUa1+cVeeK5HtXrdyvdLMGfYvX7N66i/8OdZzYcOG1ViszthwY8WDIfi8f1qtZMlOyo2lCtYy6qWCfrO12Jv1ZcejWs1Wj3cw79dmwpjnn1Q1ctPHcvwm3xj08Oeixsps/tg09smvPsHsfl17aOHPKAQEAOw==\" />\r\n                        <div style=\"font-size:10px;\">0</div>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n        </td>\r\n    </tr>\r\n</table>\r\n<table class=\"print_paper t-bn\">\r\n    <tr height=\"60\">\r\n        <td class=\"tc br\" width=\"77\">\r\n            [二维码]\r\n        </td>\r\n        <td class=\"tc b f20\" width=\"290\">\r\n            京-朝阳 \r\n        </td>\r\n    </tr>\r\n</table>\r\n\r\n<table class=\"print_paper btw7\">\r\n    <tr height=\"60\">\r\n        <td class=\"tc\">\r\n            <img src=\"data:image/gif;base64,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\" />\r\n        </td>\r\n    </tr>\r\n    <tr height=\"24\">\r\n        <td class=\"f12 pl5\">\r\n            运单编号   <span class=\"pl80 b\">4060002543597</span>\r\n        </td>\r\n    </tr>\r\n</table>\r\n\r\n<table class=\"print_paper t-bn btw7\" >\r\n    <tr height=\"25\">\r\n        <td class=\"f7 pl5\" width=\"125\">\r\n            收件人/代签人:\r\n        </td>\r\n        <td class=\"f18 b far\" width=\"106\">\r\n\r\n        </td>\r\n        <td class=\"f7 pl5\">\r\n            <div>签收日期：<span class=\"pl10\">年</span><span class=\"pl10\">月</span><span class=\"pl10\">日</span>\r\n            </div>\r\n        </td>\r\n    </tr>\r\n</table>\r\n<table class=\"print_paper t-bn\">\r\n    <tr height=\"230\">\r\n        <td class=\"vt f8\">\r\n            订单号：YD201703011102105952<br />\r\n            寄件物品信息：鞋子X1<br />\r\n            备注：\r\n        </td>\r\n    </tr>\r\n    <tr height=\"35\">\r\n        <td class=\"vt\">\r\n            <span class=\"pl5\" style=\"font-size:10px;\">4060002543597</span><img  src=\"data:image/gif;base64,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\"/>\r\n        </td>\r\n    </tr>\r\n</table>\r\n\r\n<table class=\"print_paper\" height=\"130\">\r\n    <tr height=\"116\">\r\n        <td class=\"f8 lh12\" width=\"234\">\r\n            <div style=\"margin-left:3px\">\r\n                姓名：Taylor <br/>\r\n                电话：15018442396<br/>\r\n                发件公司：  <br/>\r\n                发件地址：上海上海青浦区明珠路73号<br/>\r\n            </div>\r\n            <div class=\"pl10 pt5\">\r\n                收件人：Yann<br/>\r\n                电话：15018442396<br/>\r\n                收件公司：<br/>\r\n                <div class=\"wba\">\r\n                    收件地址：北京北京朝阳区三里屯街道雅秀大厦\r\n                </div>\r\n            </div>\r\n        </td>\r\n        <td class=\"vt f8\">\r\n            \r\n        </td>\r\n    </tr>\r\n    <tr>\r\n        <td colspan=\"2\" class=\"xx10\">官网:http://www.yundaex.com  <span class=\"pl10\">客服热线:400-821-6789</span> <span class=\"pl10\">收货人联</span></td>\r\n    </tr>\r\n</table>\r\n</body>\r\n</html>"
}
btn.onclick = function() {
  var w = window.open();
  w.document.open()
  w.document.write(json.PrintTemplate)
  w.document.close();
}
// a.innerHTML = json.PrintTemplate;
</script>
<html>
打印电子面单

小脑fu

引用和评论

javascript算法基础之01背包，完全背包，多重背包实现

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

一个用JavaScript生成思维导图(mindmap)的github repo
