twigfiddle.com - Fiddle 0fhcos v1 - Created on February 22, 2021 10:30

File

<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>{{languages.ShippingLabel}}</title>
		<style>
			body {
				margin: 0;
				padding-top: 0.05cm;
				background-color: white;
				font: 12pt "Tahoma";
			}
			* {
				box-sizing: border-box;
				-moz-box-sizing: border-box;
			}
			.page {
				height: 7.4cm;
				width: 10.5cm;
				padding: 0.05cm;
				margin: auto;
				border-radius: 5px;
				background: white;
			}
			.group {
				height: 2.4cm;
				width: 100%;
				display: block;
			}
			.maxheight {
				height: 100%;
			}
			.floatright {
				float: right;
			}
			.floatleft {
				float: left;
			}
			.border {
				border: 1px black solid;
			}
			.border-left {
				border-left: 1px black solid;
			}
			.border-right {
				border-right: 1px black solid;
			}
			.border-bott {
				border-bottom: 1px black solid;
			}
			.border-top {
				border-top: 1px black solid;
			}
			.fs-8 {
				font-size: 8px;
			}
			.fs-9 {
				
				font-size: 9px;
			}
			.fs-10 {
				padding-top: 7px;
				padding-bottom: 7px;
				font-size: 10px;
			}
			.fs-11 {
				padding-top: 7px;
				font-size: 11px;
			}
			.fs-12 {
				font-size: 12px;
			}
			.fs-15 {
				font-size: 15px;
			}
			.fs-16 {
				font-size: 16px;
			}
			.fs-17 {
				font-size: 17px;
			}
			.fs-18 {
				font-size: 18px;
			}
			.fs-20 {
				font-size: 20px;
			}
			.fs-24 {
				font-size: 24px;
			}
			.fs-25 {
				font-size: 25px;
			}
			.fs-26 {
				font-size: 26px;
			}
			.strong {
				font-weight: 700;
			}
			.right {
				text-align: right;
			}
			.center {
				text-align: center;
			}
			.border-dashed {
				border: 1px dashed #808080
			}
			@page {
				size: A7;
				margin: 0;
				size: landscape;
			}

			@media print {
				.page {
					margin: 0;
					border: initial;
					border-radius: initial;
					width: initial;
					min-height: initial;
					box-shadow: initial;
					background: initial;
					page-break-after: always;
					size: 4.1in 2.9in;
					size: landscape;
					zoom: 99%;
				}
			}
		</style>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<div class="page">
			{% for obj in ListShippingLabel %}
				<div class="group-1 border" style="border-bottom: none; height:0.71cm">
					<div class="NameC3PL center" style="display: flex;">
						<span class="floatleft" style="width: 55%">
							{% if obj.ClientPickup %}
								<span class="fs-12 strong center maxheight floatleft" style="width: 65%;  padding-top: 5px">
									ĐỐI TÁC TỰ LẤY
								</span>
							{% else %}
								<span class="fs-18 strong center maxheight floatleft" style="width: 65%;">
									{{obj.ShortNameC3PL}}
								</span>
							{% endif %}
							<span class="fs-10 border-left border-right center floatright current-date" style="width: 35%;">
								{{ CurrentTime }}
							</span>
						</span>
						<span class="floatright maxheight" style="width:45%; ">
							<span class=" fs-12 strong border-right center maxheight floatleft" style="width: 70%; padding-top: 6px; height: 27px">
								{{obj.SortCode}}
							</span>
							<span class="strong maxheight fs-11 floatright" style="width: 30%; padding-top:5px">
								{{ShippingServiceCode}}
							</span>
						</span>
					</div>
				</div>
				<div class="group-1 border" style="border-bottom: none; height:4.49cm; ">
					<div class="floatleft border-right" style="width:65%; height:100%">
						<div class="border-bott center" style="height:25%">
							<div class="fs-20 " style="padding-top: 4px;">
								<svg id="{{obj.IdInvoiceNo}}" class="imgBarcode"></svg>
							</div>
							<div class="fs-12 strong" style="text-align: left; padding-left: 3px;">{{obj.InvoiceNo}}</div>
						</div>
						<div class="border-bott center" style="height:25%">
							<div class="fs-12 strong" style="text-align: right; padding-right: 3px;">
									{{obj.SoCode}}
							</div>
							<div class="fs-20" style="">
								<svg id="{{obj.IdSoCode}}" class="imgBarcode"></svg>
							</div>
						</div>
						<div style="height:50%; ">
							<table style="margin:2px; height: 100%; font-size: 10px">
								<tr>
									<td valign="top">
										{% if obj.ShippingOrderName %}
											<span>{{obj.ShippingOrderName}}</span> -
										{% endif %}
										<span>{{obj.ShippingOrderPhone}} -</span>
										<span>{{obj.ShippingOrderAddress}}</span>
									</td>
								</tr>
								<tr>
									<td class="center" valign="bottom" style="font-size: 12px; padding-bottom: 2px;">
										{% if (obj.ClientCode in ["PVU", "VNS"] and obj.RefExternalCode) %}
										{{obj.RefExternalCode}}
										{% else %}
											{{obj.ExternalCode}}
										{% endif %}
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="floatright" style="width:35%; height:100%; padding: 0">
						<div class="border-bott" style="height:25%; display: inline-flex; width: 100%;">
							<div class="border-right" style="width : 61%">
								<div class="fs-9 center" style="padding-top: 2px; padding-bottom: 3px;">
									Số tiền thu hộ (VNĐ):
								</div>
								<div class="fs-12 strong center" >
									{{obj.FinalCod}}
								</div>
							</div>
							<div class="center fs-9" style="width:39%; padding-top: 10px;">
								{% if IsDeadlineShippingTemplate %}
									{{DeliveryDeadline}}<br/>
									{{DeliveryDeadlineHour}}
								{% endif %}
							</div>
						</div>
						<div class="fs-8" style="padding: 2pt; word-wrap:break-word;">
							{% if obj.ShippingNote|length > 400 %}
								{{obj.ShippingNote|slice(0, 400)}}...
							{% else %}
								{{obj.ShippingNote}}
							{% endif %}
						</div>
					</div>
				</div>
				<div class="group border" style="display: flex; height: 2cm">
					<div class="border-right maxheight floatleft" style="width: 33%; border-top: none;">
						<div class="" style="height: 70%">
							{% set len = min(2, ExtraServices|length) %}
							{% if len > 0 %}
								{% set height = 100/(len) %}
								{% set padding = height/8 %}
								{% for ser in ExtraServices|slice(0, len) %}
									<div class="border-bott strong center fs-10" style="height: {{height}}%; padding-top: {{padding}}px;">
										{{ser.Name}}
									</div>
								{% endfor %}
							{% else %}
								<div class="border-bott" style="height: 100%;"></div>
							{% endif %}
						</div>
						<div class="center fs-17 strong " style="height: 30%;">
							{{obj.SortCode1}}
						</div>
					</div>
					<div class="maxheight floatright center" style="width: 67%; border-left: none; padding-left: 0; padding-right: 0; float: left;">
						<div class="border-bott" style="height: 70%; padding-top: 5px;">
							<div class="fs-20" >
								<svg id="{{obj.IdTrackingCode}}" class="imgBarcode"></svg>
							</div>
							<div class="fs-12 strong" style="padding-top:3px">
								{{obj.TrackingCode}}
							</div>
						</div>
						<div class="center" style="height: 30%; padding-bottom: 0;">
							<span class=" fs-18 strong center maxheight floatleft " style="width: 30%; ">
								{{obj.StrFormatGroup}}
							</span>
							<span class="floatleft fs-12 center maxheight border-right border-left" style="width: 30%; padding-top: 5px;float: left;">
								{{obj.FormatWeight}}
								kg
							</span>
							<span id="checkLoadHTML" class=" fs-18 strong center maxheight floatright" style="width: 39%;">
								{{obj.SortCode2}}
							</span>
						</div>
					</div>
				</div>
				<script type="text/javascript">
                    JsBarcode("#{{obj.IdInvoiceNo}}", "{{obj.InvoiceNo}}", {
                        fontSize: 12, fontOptions: "bold", height: 23, width: 1.1, displayValue: false, margin: 0,
					});
					JsBarcode("#{{obj.IdSoCode}}", "{{obj.SoCode}}", {
                        fontSize: 12, fontOptions: "bold", height: 23, width: 1.1, displayValue: false, margin: 0,
					});
					JsBarcode("#{{obj.IdTrackingCode}}", "{{obj.TrackingCode}}", {
                        fontSize: 12, fontOptions: "bold", height: 25, width: 1.1, displayValue: false, margin: 0,
					});
				</script>
			{% endfor %}
		</div>
	</body>
</html></body></html></body></html>

Format

{"ExtraServiceCode":null,"ExtraServices":null,"ListShippingLabel":[{"SoId":111263,"SoCode":"SOETNJGDPUVAB","ExternalCode":"SOETNJGDPUVAB","IdRegionSoCode":"idRegion_SOETNJGDPUVAB","LogoEton":"/Content/images/logo.png","LogoClient":"https://met.eton.vn/eto/images/eto.png","LogoC3Pl":null,"PathUrl":"","ClientId":11,"HotLineClient":null,"WarehouseId":2,"WarehouseCode":"01","WarehouseName":"Kho Eton","WarehouseAddress":" 18D Cộng Hòa, Phường 02, Quận Tân Bình, Thành phố Hồ Chí Minh, Vietnam","CustomerId":77744,"ShippingOrderName":null,"ShippingOrderAddress":"2M Đinh Bộ Lĩnh, Phường 15, Quận Bình Thạnh, Thành phố Hồ Chí Minh","ShippingOrderPhone":"0355202208 - Trịnh Xuân Linh","InvoiceGroup":1,"TotalGroup":1,"StrFormatGroup":"1 / 1","InvoiceNo":"01ETN20J1021411","SoClient":"SOETNJGDPUVAB","ShippingNote":null,"HasClientPickUp":true,"FinalCod":"0","NameC3PL":null,"TrackingCode":"SOETNJGDPUVAB","PackedDate":"20/10/2020 15:25","ExpectDeliveryDate":"","ClientPickup":true,"DocumentInvoice":["","","","ĐỐI TÁC TỰ LẤY"],"IndexNo":"","IdTrackingCode":"eton_TrackingCode_","IdExternalCode":"eton_ExternalCode_","IdSoCode":"eton_SOCode_","IdInvoiceNo":"eton_InvoiceNo_","FormatWeight":"0.00","IsEtonDeliveryService":false,"SortCode":"PN_BT","RoutePriority":null,"CustomerName":"Trịnh Xuân Linh","CustomerPhone":"0355202208","SortCode1":null,"SortCode2":null,"ShortNameC3PL":null,"RefExternalCode":"AUTO_CREATE_CODE","TotalUnits":1,"Hotline":"0377609222","ContactPhone":"083123456","SortCodeAndRoutePriority":"PN_BT","OrdinalNumberOfSo":"102141","SoIsCancelled":false,"ClientPickUpInfo":"ĐỐI TÁC TỰ LẤY","ShippingNoteForClientPickUp":"","ShippingOrderPhoneOrigin":"0355202208","SortCode3Pl":null,"ShowSortCode3Pl":false,"ShowSortCodeAndRoutePriority":true,"ShowNote":false,"ClientCode":"ETN","ClientName":"ETON Viet Nam","HotlineClientBranch":null,"ClientBranchCode":null,"DeliveryStation":null}],"IsDeadlineShippingTemplate":false,"SortCode":"PN_BT","ShippingServiceCode":"D2H","DeliveryDeadline":null,"DeliveryDeadlineHour":null,"languages":{"Phone_Shippinglable":"SĐT","Address":"Địa chỉ","ShippingLabel":"Mã nhãn vận chuyển","SOCode":"Mã SO","Kg":"Kg","Note":"Ghi chú"},"CurrentTime":"22/02 15:35"}