




























代码:
@{ Layout = "_Layout_easyui"; //打印1 } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Intel 5cm Vertical Label</title> <script src="~/js/JsBarcode.all.min.js"></script> <style> /* 打印设置:A4纸,无边距,适配5cm宽标签 */ /*page { size: A4; margin: 0; }*/ body { font-family: "Arial Narrow", Arial, sans-serif; background: #ffffff; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; } /* 核心标签样式:宽度5cm,高度适配内容 */ .intel-label { width: 50mm; /* 精确5厘米宽度 */ height: 297mm; /* 适配A4高度,可根据实际裁剪 */ background: #ffffff; border: 1px dashed #cccccc; /* 裁剪辅助虚线,打印后可裁掉 */ padding: 8mm 5mm; /* 内边距匹配原标签 */ font-size: 9pt; /* 原标签字体大小 */ line-height: 1.3; /* 行高适配紧凑排版 */ box-sizing: border-box; } /* Intel logo样式 */ .logo { text-align: center; margin-bottom: 5mm; } .logo img { width: 40mm; height: auto; } /* 条码样式:匹配原标签尺寸 */ /*.barcode { height: 8mm; background: repeating-linear-gradient( 90deg, #000000, #000000 0.8mm, #ffffff 0.8mm, #ffffff 2mm ); margin: 2mm 0; width: 100%; }*/ /* 小条码样式 */ /*.barcode-small { height: 5mm; background: repeating-linear-gradient( 90deg, #000000, #000000 0.6mm, #ffffff 0.6mm, #ffffff 1.5mm ); margin: 1mm 0 5mm 0; width: 60%; }*/ /* 粗体强调文本 */ strong { font-weight: 600; } /* 三角形警告符号 */ .triangle { font-size: 9pt; margin: 8mm 0 2mm 0; } /* 修复原标签的拼写错误(ENSURER) */ .typo { text-transform: lowercase; } .triangle .warnImg { width: 30%; height: auto; float: left; } .triangle .warnContent { width: 70%; height: auto; float: left; } .triangle .warnImg img { width: 10mm; height: auto; } </style> </head> <body> <div class="intel-label"> <!-- Intel Logo --> <div class="logo"> <img src="~/image/IntelPrint.png" /> @*<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="22" font-family="Arial" font-size="24" font-weight="bold" fill="#000">intel</text> <circle cx="15" cy="15" r="12" stroke="#000" stroke-width="1" fill="none" /> <path d="M 85 5 L 95 15 L 85 25" stroke="#000" stroke-width="1" fill="none" /> <path d="M 90 5 L 100 15 L 90 25" stroke="#000" stroke-width="1" fill="none" /> </svg>*@ </div> <!-- 额定参数 --> <div><strong>RATINGS:</strong></div> <div>100 240VAC</div> <div>50 60Hz</div> <div>A 14/11</div> <!-- 序列号与条码 --> <div><strong>SERIAL NO:</strong> <span id="barcodeSN"></span></div> <svg class="barcode" id="barcodeSN_Svg"></svg> <!-- PCODE与小条码 --> <div><strong>PCODE:</strong> <span id="barcodeBoxNo"></span></div> <svg class="barcode-small" id="barcodeBoxNo_Svg"></svg> <!-- 组装信息 --> <div>Assembled in CHINA with partial</div> <div>foreign content</div> <br> <!-- 产品属性 --> <div><strong>DEVELOPMENT PRODUCT</strong></div> <div><strong>NOT FOR SALE OR LEASE</strong></div> <div><strong>NOT INTENDED FOR HOME USE</strong></div> <br> <!-- 安全认证说明 --> <div>Safety Certification that may</div> <div>be</div> <div>Required for operation of this</div> <div>Device in your region has not</div> <div>been completed.</div> <br> <!-- FCC授权说明 --> <div>This product has not been</div> <div>Authorized by the United States</div> <div>Federal Communications</div> <div>Commission (FCC) or similar</div> <div>Governmental agencies in other</div> <div>countries.</div> <br> <!-- 销售限制说明 --> <div>This device is not, and may not</div> <div>be, offered for sale or lease, or</div> <div>sold or leased until authorization</div> <div>of the United States FCC or</div> <div>its equivalent in other countries</div> <div>has been obtained.</div> <br><br> <!-- 用途说明 --> <div>This product is intended for:</div> <div><strong>DEVELOPMENT USE ONLY!</strong></div> <br> <!-- 警告标识与文字 --> <div class="triangle"> <div class="warnImg"> <img src="~/image/warn.png" /> </div> <div class="warnContent"> <div>TO ENSUER SAFETY,</div> <div>REFERENCE THE</div> <div>SAFETY DOCUMENT</div> </div> </div> </div> </body> </html> @section Scripts{ <script> var pId = @ViewBag.PID; var area = "@ViewBag.Area"; var sn = "@ViewBag.SN"; var boxNo = "@ViewBag.BoxNo"; $(function () { $('#barcodeSN').html(sn); $('#barcodeBoxNo').html(boxNo); // 生成条形码 JsBarcode("#barcodeSN_Svg", sn, { format: "CODE128", // 指定条形码格式,例如CODE128 lineColor: "#000", // 条形线的颜色 width: 0.7, // 条形线的宽度 height: 30, // 条形码的高度 displayValue: false // 是否显示条形码下方的值 }); // 生成条形码 JsBarcode("#barcodeBoxNo_Svg", boxNo, { format: "CODE128", // 指定条形码格式,例如CODE128 lineColor: "#000", // 条形线的颜色 width: 0.4, // 条形线的宽度 height: 30, // 条形码的高度 textAlign: "right", displayValue: false // 是否显示条形码下方的值 }); }) </script> }
参数:

效果:

参考:https://www.jb51.net/article/111552.htm
https://www.cnblogs.com/wstong2052/p/17612848.html
文心快码
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。