京东html面单

<head>
<style>
@media print {
@page {
size: auto;
margin: 1cm;
}

#printBtnWrapper {
display: none;
}

.printTitleHide {
display: none;
}
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {
display: inline-table;
}

* {
box-sizing: border-box;
}

body {
font-family: '思源宋体';
font-size: 18px;
}

/*css reset*/
body,
h2,
p {
margin: 0;
padding: 0;
}

h2,
b {
font-weight: normal;
}

ul,
ol,
li {
margin: 0;
padding: 0;
list-style: none;
}

.printBtn {
150px;
height: 30px;
background-color: #35aa47;
color: #ffffff;
font-size: 14px;
border: none;
}

.wrapper {
position: relative;
9cm;
height: 8.5cm;
margin: 0 auto;
}

.logo {
text-align: center;
margin-bottom: 30px;
}

.user-info {
500px;
}

.user-info .title {
padding-bottom: 10px;
border-bottom: 1px solid #000;
}

.user-info .name {
margin-top: 10px;
}

.inof-rig-ma {
position: absolute;
top: 95px;
right: 50px;
text-align: center;
}

.drug {
padding: 10px 0;
}

.drug h2 {
font-size: 18px;
}
.drug-list{
color:#616262;
margin-left:-20px;
}
.drug-list li{
float:left;
margin-bottom:10px;
margin-left:20px;
padding: 2px;
border:1px solid #000;
color: #000;
}
.drug-product-list {
100%;
color: #616262;
margin-left: -20px;
}

.drug-product-list li {
100%;
margin-bottom: 10px;
margin-left: 20px;
padding: 2px;
color: #000;
}
.drug-product-list li .drug-product-ingredients {
/*font-weight: bold;*/
}

.drug-product-list li .drug-product-name {
margin-top: 6px;
color: #777878;
font-size: 14px;
}

.drug-product-list li .drug-product-other {
100%;
text-align: right;
margin-top: 6px;
margin-right: 20px;
font-size: 16px;
}

.herb-list {
100%;
border-collapse: collapse;
font-size: 22px;
}

.herb-list tr {
display: flex;
flex-flow: row wrap;
flex-direction: row;
}

.herb-list td {
display: flex;
align-items: center;
justify-content: center;
flex: none;
33.33%;
padding: 10px;
border: 1px solid #000;
}

.delay-drug label {
color: #777878;
margin-left: 30px;
}

.delay-drug label:first-of-type {
margin-left: 0;
}

.delay-drug label input {
display: none;
}

.delay-drug label a {
display: inline-block;
10px;
height: 10px;
border: solid 1px #0b0306;
position: relative;
margin-right: 5px;
}

.delay-drug label input:checked+a:after {
/*display: block;
content: '';
30px;
height:30px;
position:absolute;
left:0;
top:-10px;
background:url("./images/checked.png") no-repeat;
background-size:30px 30px;*/
}

.total {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #000;
}

.seal {
position: absolute;
bottom: 40px;
right: 60px;
}

td>div {
text-align: right;
}

.special_manufacture {
font-size: 18px;
}

.watermark {
position: absolute;
240px;
height: 240px;
z-index: 999;
}

*{margin:0;padding:0}
table{margin-top:-1px;font:11px "黑体",Verdana,arial,sans-serif;border-collapse:collapse}
table.container{ 9cm;}
table td{border:1px solid #000}
table.nob{100%}
table.nob td{border:0}
table td.center{text-align:center}
table td.right{text-align:right}
table td.pl{padding-left:5px}
table td{padding-left:5px}
.font_s{font-size:10px;-webkit-transform:scale(0.84,0.84);*font-size:10px}
.font_m{font-size:14px;font-weight:bold}
.font_l{font-size:16px;font-weight:bold}
.font_xl{font-size:18px;font-weight:bold}
.font_xxl{font-size:32px;font-weight:bold}
table td img{margin-left: 5px; margin-right: 5px;}

</style>
</head>

<body id="printPage" onafterprint="afterPrintFunc()">
<div id="printBtnWrapper" style="margin: 20px 0 0 20px;">
<button class="printBtn printBtn-single">打印</button>
</div>
<div class="wrapper">
<table class="container">
<tr>
<td height="62" class="center">
<table class="nob">
<tr>
<td class="center">
<img width="300" height="40" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbwAAAAeAQMAAABt3TnNAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUOI3ty7EJQDEIBcBAWsFVBFvB1QXbQFYRbC3+nyLV66651bRtqMQ1Itr9iInUsN6+yTozmuzkLF1Z/TPM+NRCRERERER8FT8JyTq0mEMNZQAAAABJRU5ErkJggg=="/>
</td>
</tr>
<tr>
<td class="center">
JDVC04055990269-1-1-
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container">
<tr>
<td height="40" style=" 13%">
始发地
</td>
<td colspan="3" rowspan="2">
<table class="nob">
<tr>
<td colspan="2">
<strong>
广州太和分拣中心
</strong>
</td>
</tr>
<tr>
<td>
<strong>
302-A09博-5
</strong>
</td>
</tr>
<tr>
<td class="right font_s" colspan="2">
</td>
</tr>
</table>
</td>
<td height="40" style=" 13%">
目的地
</td>
<td colspan="3" rowspan="2">
<table class="nob">
<tr>
<td colspan="2">
<strong>
广州博展分拣中心
</strong>
</td>
</tr>
<tr>
<td>
<strong>
10-26-5
</strong>
</td>
</tr>
<tr>
<td class="right font_s" colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container">
<tr>
<td style=" 6%"></td>
<td>G广州猎德营业部</td>
<td>23</td>
<td>1/1</td>
</tr>
</table>
<table class="container">
<tr>
<td style=" 10%">收件信息</td>
<td colspan="2" style=" 61%">
广东省广州市天河区珠江新城天河路
<p>未知 13692714849</p>
</td>
<td style="padding: 0px !important;">
<table style="border: 0; 100%;">
<tr>
<td>客户签字</td>
<td width="70%"></td>
</tr>
<tr>
<td>运费</td>
<td></td>
</tr>
<tr>
<td>货款</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="text-align: center; font-size: 9px; margin-left: 15px;">2020-06-10</div>

<table class="container">
<tr>
<td class="center" height="10">
运单号：JDVC04055990269
</td>
</tr>
</table>
<table class="container">
<tr>
<td width="229" height="55">
<table class="nob">
<tr>
<td class="font_s">
收件人信息：未知 13692714849
</td>
</tr>
<tr>
<td class="center">
<img width="250" height="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU4AAAAeAQMAAAB5ZGVpAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEBJREFUOI3tyrEJADAIBMCAbcBVBFvB1YW0AVcRbL/IHsGrb/Umwy5xjYh2v2IiBdbsPKwA9CCT2tbUqVOn/lkfeUGmSbn3mZYAAAAASUVORK5CYII="/>
</td>
</tr>
<tr>
<td class="center">
JDVC04055990269
</td>
</tr>
</table>
</td>
<td>
<table class="nob">
<tr>
<td>
备注：
</td>
</tr>
<tr>
<td>
<p>商家订单号：833373</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>次日达</td>
<td>特惠送</td>
<td>保价</td>
<td>  </td>
</tr>
</table>
<table class="container">
<tr>
<td>
寄方信息:
广东省广州市番禺区番禺区
<p style="margin-top: 3px;">39237997</p>
</td>
<td width="30%">
<p>商家ID:020K888</p>
</td>
</tr>
</table>
</div>

var printSingleFunc = function(target) {
var $this = $(target);
$this.attr('disabled', 'disabled');
$this.css('background-color', '#cccccc');
$this.text('处理中');
window.print();
$.ajax({
type: "GET",
url: 'http://www.kwmzy.com:8005/tdadmin/pharmacy/single/print/number?ids=833373',
success: function(res) {
if (res.success) {
window.print();
} else {
alert(res.msg);
}
$this.removeAttr('disabled');
$this.css('background-color', '#35aa47');

$('#title').text('');
},
dataType: 'json'
});
};

$('.printBtn-single').on('click', function() {
printSingleFunc(this);
});

});

function afterPrintFunc() {
$('.herb-weight').show();
$('.herb-dose').show();
$(".herb-list .herb-weight .total-weight").hide();
$(".herb-list .herb-weight .weight").show();
}
</script>
</body>

</html>

相关阅读:
CSS Hack技术介绍及常用的Hack技巧集锦
全面了解TCP/IP到HTTP
JavaScript异步流程控制的前世今生
mstOne
mst总结
媒体查询基本方法使用
点击按钮复制到剪贴板
监听图片src发生改变时的事件
高德地图获取经纬度
jQuery抽奖插件 jQueryRotate

原文地址：https://www.cnblogs.com/qiuxiaoliang/p/13094090.html