<!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>
相关推荐
顺丰快递丰桥电子面单html+css格式,丰桥自定义打印对接使用,顺丰快递电子面单格式内容简洁层级分明,易于修改等
顺丰、京东、中通、圆通快递面单模板HTML+CSS,使用html+css实现;自适应150mm、180mm、210mm宽度
注:打印电子面单需要保存接口返回来的HTML数据, 请求参数 IsReturnPrintTemplate:1(返回电子面单模板:0-不需要;1-需要) 返回参数 PrintTemplate(返回HTML文本) 2.保存返回的HTML文本和物流单号 建议,利用...
http://www.lodop.net/download.html 2.解压安装运行 3.vue部分实现 3.1将lodopDuncs.js文件放入工程中,具体操作可见:http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-...
快递单模板,使用html+css+js实现,前端模板,数据可从后台获取并自己实现打印
中通快递单打印模板,导入好用快递单打印软件进行打印。 ★★程序功能如下★★ 1。支持自定义快递单模板(别的单据也支持) 2。自动填写发件人的信息。 3。自动填写收件人的信息。 4。自动抓取淘宝需要发货的订单...
顺丰快递单模板html+css.zip 快递单模板,使用html+css+js实现,前端模板,数据可从后台获取并自己实现打印
顺丰快递单模板html+css.zip 快递单模板,使用html+css+js实现,前端模板,数据可从后台获取并自己实现打印
2.使用html 标签引入Webbrowser控件 这种方式是其只兼容IE10以下的浏览器,其他浏览器不可使用 3.document.execCommand(”print”) 类似window.print() **4.采用JQuery插件 5.用浏览器打印第三方插件如lodpod...
顺丰快递单html div css 顺丰打印模版demo
商城订单自动打印源码,本程序,采用PHP+C#开发,下订单后,发送到本地电脑,编辑好本地报表模板既可打印,报表采用HTML,方便编辑,自定义 运行环境.net framework2.0,mysql5.0 +php5.3+apache2.2
订单批量打印,内置12家主流快递公司面单模板,包括最新的电子面单,你还可以进行个性化设计商品数据多渠道批量同步编辑。 可将天猫、京东、淘宝、分销王、易开店等多个平台的商品进行统一编辑,一次编辑即可实现多...
内置12家主流快递公司面单模板,包括最新的电子面单,你 还可以进行个性化设计 商品数据多渠道批量同步编辑 可将天猫、京东、淘宝、分销王、易开店等多个平台的商品进 行统一编辑,一次编辑即可实现多渠道平台铺货和...