shopnc 商家中心添加打印商品二维码功能
需求中提到需要增加每一件商品可以打印,用于线下体验店实体商品的二维码标签,客人可以根据手机扫二维码功能进行购买
任务描述:
1、如附件实现”批量打印标签“和单个商品”打印“标签功能。
2、标签有两种”大标签“和”小标签“,样式祥见附件图。
一,单个打印标签
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 6 7 8 <style type="text/css"> 9 10 .my_spec_list{ 11 line-height: 18px; 12 font-size: 18px; 13 14 }; 15 .my_goods_serial { 16 font-size: 24px; 17 font-weight: bold; 18 } 19 20 body { color: #666; background-color: #F9F9F9;} 21 html,body{ height:100%;} 22 h2 { font: 24px/40px "microsoft yahei"; color: #27A9E3;} 23 h1, h2, h3, h4, h5, h6 { font-family: "microsoft yahei"; font-weight: normal;} 24 h1 { font-size: 32px;} 25 h2 { font-size: 25px;} 26 h3 { font-size: 22px;} 27 h5 { font-size: 15px;} 28 h6 { font-size: 13px;} 29 .lighter { font-weight: lighter;} 30 .bolder { font-weight: bolder;} 31 h1.smaller { font-size: 31px;} 32 h2.smaller { font-size: 24px;} 33 h3.smaller { font-size: 21px;} 34 h4.smaller { font-size: 17px;} 35 h5.smaller { font-size: 14px;} 36 h6.smaller { font-size: 12px;} 37 h1.bigger { font-size: 33px;} 38 h2.bigger { font-size: 26px;} 39 h3.bigger { font-size: 23px;} 40 h4.bigger { font-size: 19px;} 41 h5.bigger { font-size: 16px;} 42 h6.bigger { font-size: 14px;} 43 h1.block, h2.block, h3.block, h4.block, h5.block, h6.block { margin-bottom: 16px;} 44 i { font-size: 1.2em;} 45 a:focus, a:active { text-decoration: none;} 46 a { color: #0579C6; text-decoration: none; -webkit-transition-property:color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease;} 47 a:hover { text-decoration: underline; color: #F60;} 48 .hidden { display: none;} 49 .center { text-align: center;} 50 .position-relative { position: relative;} 51 .position-absolute { position: absolute;} 52 .dark { color: #333333 !important;} 53 .white { color: #FFFFFF !important;} 54 .red { color: #DD5A43 !important;} 55 .light-red { color: #FF7777 !important;} 56 .blue { color: #27A9E3 !important;} 57 .light-blue { color: #93CBF9 !important;} 58 .green { color: #69AA46 !important;} 59 .light-green { color: #B6E07F !important;} 60 .orange { color: #FF892A !important;} 61 .purple { color: #A069C3 !important;} 62 .pink { color: #C6699F !important;} 63 .pink2 { color: #D6487E !important;} 64 .brown { color: #A52A2A !important;} 65 .grey { color: #777777 !important;} 66 67 /* ---------------------------------------- */ 68 /* 常用宽度、高度、边距、边框属性 */ 69 /* ---------------------------------------- */ 70 71 72 /* 发货单打印页面 */ 73 .print-layout { font-size:12px; background:#FAFAFA; border: solid 1px #CCC; position:relative; width:210mm; height:297mm; padding:5mm 50mm 5mm 5mm ; margin: 20px auto; box-shadow: 2px 2px 2px rgba(204,204,204,0.5); } 74 .print-layout .print-btn {background:#FFF; border: solid 1px #ccc; position: absolute; z-index: 3; top:10mm; right:10mm; line-height:32px; padding:5px 10px; border-radius: 5px; box-shadow: 2px 2px 0 rgba(153,153,153,0.2); cursor: pointer;} 75 .print-layout .print-btn:hover { background: #555; box-shadow: none; border-color: #555;} 76 .print-layout .print-btn i { background: url(../images/seller/ncsc_bg_img.png)scroll no-repeat 0 -460px; vertical-align: middle; display: inline-block; width: 32px; height: 32px;} 77 .print-layout .print-btn a { font-family:"microsoft yahei"; font-size: 20px;padding: 0 0 0 10px; color: #555; font-weight:600; display:inline-block; vertical-align: middle;} 78 .print-layout .print-btn:hover a, .print-layout .print-btn a:hover { color: #FFF; text-decoration:none;} 79 .print-layout .a5-size, .print-layout .a4-size { background:#FFF; border: dashed 1px #ccc; width: 210mm; position:absolute; top:5mm; left:5mm; padding:1px;} 80 .print-layout .a5-size { height:148mm; z-index:2;} 81 .print-layout .a4-size { height:297mm; z-index:1;} 82 .print-layout .a5-tip, .print-layout .a4-tip{ color:#333; width:36mm; position: absolute; z-index:2; right:8mm;} 83 .print-layout .a5-tip { top:50mm;} 84 .print-layout .a4-tip { } 85 .print-layout dl dt h1 { font-family:"Arial Black", Gadget, sans-serif; font-size:72px; line-height:72px;} 86 .print-layout dl dt em { font-family: Arial; font-size:11px; line-height:20px; padding: 0 8px; height:20px; border-radius:10px; -webkit-text-size-adjust:none;} 87 .print-layout .a5-tip dd, .print-layout .a4-tip dd { line-height:24px;} 88 .print-layout .print-page { width: 210mm; height:297mm; position:absolute; z-index:3; top:5mm; left:5mm; margin:1px; overflow:auto;} 89 .orderprint { background: #FFF; width: 190mm; height:100%; margin-bottom:20px;padding:10mm 10mm 8mm 10mm; color:#000000; position:relative;} 90 .orderprint .top { font-family:"microsoft yahei"; line-height:60px; width:190mm; height:60px; overflow:hidden; font-size:24px;} 91 .orderprint .top .logo { width:200px; height:60px; float:left;} 92 .orderprint .top .logo-title { text-align: left; width:450px; height: 60px; float:left; margin-left:10px; overflow:hidden;} 93 .orderprint .top .full-title { width:100%; text-align:center;} 94 .orderprint .explain { color: #555; line-height: 20px; width:100%;} 95 .orderprint .seal { position: absolute; top:120px; right:50px; } 96 .orderprint .page { line-height:18px; color:#999; position: absolute; bottom:0px; left:50%; margin-left:-30px;} 97 .orderprint table { font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; width:80%; border-collapse: collapse;} 98 .buyer-info { margin: 15px 0;} 99 .order-info thead th { font-weight:normal;background: #E7E7E7; text-align:center; border-bottom: solid 2px #000; border-top: solid 2px #000; padding:2px 0;} 100 .order-info thead tr td {} 101 .order-info tbody tr th { background: #F7F7F7; text-align:left; padding:8px 0; text-align:center; font-weight:600; border-bottom: solid 2px #000; border-top: solid 2px #000;} 102 .order-info tbody tr td { padding: 8px 0; text-align: center;} 103 .order-info tfoot tr th { border-bottom: solid 2px #000; padding: 6px 0;text-align:left;font-weight:normal;} 104 .order-info tfoot tr th span { line-height:20px; white-space:nowrap; display:inline-block; width: 24%; height: 20px; padding:0; margin:0; border:0; overflow:hidden; text-overflow:ellipsis; } 105 .orderprint th{ font-variant:normal; text-align:left} 106 .w200 {107 width: 200px !important; 108 } 109 .tl {110 text-align: left !important; 111 } 112 .w70 {113 width: 70px !important; 114 } 115 .w40 {116 width: 40px !important; 117 } 118 119 .waybill-img-thumb {120 background-color: #fff; 121 border: 1px solid #e6e6e6; 122 display: inline-block; 123 height: 45px; 124 padding: 1px; 125 vertical-align: top; 126 width: 70px; 127 } 128 .waybill-img-thumb a {129 display: table-cell; 130 height: 45px; 131 line-height: 0; 132 overflow: hidden; 133 text-align: center; 134 vertical-align: middle; 135 width: 70px; 136 } 137 .waybill-img-thumb a img {138 max-height: 45px; 139 max-width: 70px; 140 } 141 .waybill-img-size {142 color: #777; 143 display: inline-block; 144 line-height: 20px; 145 margin-left: 10px; 146 vertical-align: top; 147 } 148 .waybill_item { background-color: #FEF5E6; position: absolute; left: 0; top: 0; width: 90px; height: 20px; padding: 1px 5px 4px 5px; border-color: #FFBEBC; border-style: solid; border-width: 1px 1px 1px 1px; cursor: move;} 149 .waybill_item:hover { padding: 1px 5px 1px 5px; border-color: #FF7A73; border-width: 1px 1px 4px 1px;} 150 </style> 151 <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> 152 <script type="text/javascript" src="js/common.js" charset="utf-8"></script> 153 <script type="text/javascript" src="js/jquery.poshytip.min.js" charset="utf-8"></script> 154 <script type="text/javascript" src="js/jquery.printarea.js" charset="utf-8"></script> 155 156 <title>232321111</title> 157 </head> 158 <body> 159 <div class="print-layout"> 160 <div class="print-btn" id="printbtn" title="选择喷墨或激光打印机<br/>根据下列纸张描述进行<br/>设置并打印发货单据"><i></i><a href="javascript:void(0);">打印</a></div> 161 162 <div class="a4-size"></div> 163 <dl class="a4-tip"> 164 <dt> 165 <h1>A4</h1> 166 <em>Size: 210mm x 297mm</em></dt> 167 <dd>当打印设置选择A4纸张、竖向打印、无边距时每张A4打印纸可输出2页订单。</dd> 168 </dl> 169 <div class="print-page"> 170 <div id="printarea"> 171 <div class="orderprint"> 172 <div class="top"> 173 <div class="full-title">商品詳情</div> 174 </div> 175 <div class="my_spec_list"> 176 <table style="height: 224px; " cellspacing="0" cellpadding="0"> 177 <tr> 178 <td style=" 179 width:60%; 180 font-size:16px; 181 border-top-width:1px; 182 border-left-width: 1px; 183 border-bottom-width: 1px; 184 border-top-style: solid; 185 border-left-style: solid; 186 border-bottom-style: solid; 187 border-top-color: #333; 188 border-left-color: #333; 189 border-bottom-color: #333; 190 line-height: 20px; 191 padding-left: 30px; 192 " > 193 <p style="font-size: 22px;margin-bottom: 0px;margin-top:18px;font-weight: bold;"> 人造球形绿植盘景</p> 194 <table style="width: 200px;height: 60px;" cellspacing="0" cellpadding="0"> 195 <tr> 196 <td> 197 198 <dl style="list-style-type:none;margin: 0 0 -12px 0; "> 199 <dt>颜色</dt> 200 <dt>类型</dt> 201 <dt>尺寸</dt> 202 </dl> 203 204 </td> 205 <td> 206 <dl style="margin: 0 0 -12px 0;"> 207 <dt><div class="goods_spec">:<em title="black">black</em></div><div class="goods_spec">:<em title="金属">金属</em></div><div class="goods_spec">:<em title="1280mm*1280mm">1280mm*1280mm</em></div></dt> 208 </dl> 209 </td> 210 </tr> 211 </table> <dl style=" margin-top: 8px;" > 212 <dt><strong>产品编号</strong>:FZZW0001</dt> 213 <dt><strong>SKUID</strong>:60</dt> 214 <dt style="font-size: 36px;padding-top: 5px;font-weight: bold;"> ¥:11.00</dt> 215 </dl> 216 </td> 217 <td style=" 218 border-top-width: 1px; 219 border-right-width: 1px; 220 border-bottom-width: 1px; 221 border-top-style: solid; 222 border-right-style: solid; 223 border-bottom-style: solid; 224 border-top-color: #333; 225 border-right-color: #333; 226 border-bottom-color: #333; "> 227 <p> 228 <img style="width:168px; height:168px; padding:18px" src="http://www.s.com/upload/mall/store/1/60.png"/></p></td> 229 <td style="width:30%;"> </td> 230 </tr> 231 </table> 232 <p style="margin-bottom:2px; "></p> 233 </div> 234 <div class="my_spec_list"> 235 <table style="height: 224px; " cellspacing="0" cellpadding="0"> 236 <tr> 237 <td style=" 238 width:60%; 239 font-size:16px; 240 border-top-width:1px; 241 border-left-width: 1px; 242 border-bottom-width: 1px; 243 border-top-style: solid; 244 border-left-style: solid; 245 border-bottom-style: solid; 246 border-top-color: #333; 247 border-left-color: #333; 248 border-bottom-color: #333; 249 line-height: 20px; 250 padding-left: 30px; 251 " > 252 <p style="font-size: 22px;margin-bottom: 0px;margin-top:18px;font-weight: bold;"> 人造球形绿植盘景</p> 253 <table style="width: 200px;height: 60px;" cellspacing="0" cellpadding="0"> 254 <tr> 255 <td> 256 257 <dl style="list-style-type:none;margin: 0 0 -12px 0; "> 258 <dt>颜色</dt> 259 <dt>类型</dt> 260 <dt>尺寸</dt> 261 </dl> 262 263 </td> 264 <td> 265 <dl style="margin: 0 0 -12px 0;"> 266 <dt><div class="goods_spec">:<em title="black">black</em></div><div class="goods_spec">:<em title="金属">金属</em></div><div class="goods_spec">:<em title="2480mm*2480mm">2480mm*2480mm</em></div></dt> 267 </dl> 268 </td> 269 </tr> 270 </table> <dl style=" margin-top: 8px;" > 271 <dt><strong>产品编号</strong>:FZZW0002</dt> 272 <dt><strong>SKUID</strong>:61</dt> 273 <dt style="font-size: 36px;padding-top: 5px;font-weight: bold;"> ¥:11.00</dt> 274 </dl> 275 </td> 276 <td style=" 277 border-top-width: 1px; 278 border-right-width: 1px; 279 border-bottom-width: 1px; 280 border-top-style: solid; 281 border-right-style: solid; 282 border-bottom-style: solid; 283 border-top-color: #333; 284 border-right-color: #333; 285 border-bottom-color: #333; "> 286 <p> 287 <img style="width:168px; height:168px; padding:18px" src="http://www.s.com/upload/mall/store/1/61.png"/></p></td> 288 <td style="width:30%;"> </td> 289 </tr> 290 </table> 291 <p style="margin-bottom:2px; "></p> 292 </div> 293 </div> 294 </div> 295 </div> 296 </div> 297 298 </body> 299 <script> 300 $(function(){ 301 $("#printbtn").click(function(){ 302 $("#printarea").printArea(); 303 }); 304 }); 305 //打印提示 306 $('#printbtn').poshytip({ 307 className: 'tip-yellowsimple', 308 showTimeout: 1, 309 alignTo: 'target', 310 alignX: 'center', 311 alignY: 'bottom', 312 offsetY: 5, 313 allowTipHover: false 314 }); 315 </script> 316 </html>
打印功能
html源码:https://github.com/make-in-lemon/php_print.git
二,批量打印
更新中
打印时候遇到,循环不分页或补全的问题
style="page-break-after:always"
<div class="my_spec_list" {if $item['break']=='1'} style="page-break-after:always"{/if} >这样循环就可以确保每一页都只有四个输出
if(($key+1)%4 ==0){$value['break'] = "1";}
转载于:https://www.cnblogs.com/lemonphp/p/5454874.html
shopnc 商家中心添加打印商品二维码功能相关推荐
- 解决微擎人人商城分销中心无法生成推广二维码、商品二维码的问题
如果推广二维码 和 商品 二维码 无法生成 /addons/ewei_shopv2/data/qrcode/ 看看是否有这个目录 没有的话 新建 设置写入权限
- 【Python实例分析】批量生成海报--自动添加姓名和二维码
最近参加了老男孩的一个python训练营,里面某项任务是要求在某个海报模板上批量添加姓名和二维码,生成类似下图的海报. 图中我用红色方框标记的是需要修改的地方,先来聊下自己的思路: 1.要进行图片操作 ...
- python——生成带logo的二维码图片并且保存、控制打印机打印图片二维码、整合打印(获取输入框的值)、打包成exe文件
1.生成带logo的二维码图片并且保存 前提条件:在D盘里有logo.png的图片,生成的二维码图片在D盘里的111.png import qrcode from PIL import Image# ...
- SNF开发平台WinForm-平板拍照及扫描二维码功能
在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机 这种产物 ...
- VC++利用笔记本自带摄像头扫二维码功能(附源码demo)
VC++开发常用功能一系列文章 (欢迎订阅,持续更新...) 第8章:VC++利用笔记本自带摄像头扫二维码功能(附源码demo) 源代码demo已上传到百度网盘:永久生效 ,代码实现了打开笔记本 ...
- 让你的APP轻松加上扫描二维码功能
在这个二维码横行的年代,如果一个APP连扫描二维码的功能都没有是会被耻笑的.今天小老虎教小白们如何为自己的APP添加扫描二维码功能和生成二维码,并做到外部扫描跳转网页,内部扫描跳转具体Activity ...
- 在js中调用微信的扫描二维码功能
在js中调用微信的扫描二维码功能* 关键代码 <html> <head>`在这里插入代码片`<title>js调用微信扫一扫功能测试</title>&l ...
- 【在web项目jsp页面自动生成二维码功能】
在web项目jsp页面自动生成二维码功能 原文: http://www.cnblogs.com/gczmn/. https://www.jq22.com/jquery-info294/. 先将下面的文 ...
- 在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能 步骤 新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
最新文章
- UVA10652 Board Wrapping(求凸包、计算凸多边形面积)
- Android:学习AIDL,这一篇文章就够了(上)
- 机器人弧焊焊钳型号_Delmia机器人仿真编程 第4节 创建资源库
- JAVA连接 mongodb(mac OSX)
- JZOJ 5623. 【NOI2018模拟4.2】program
- 12123选牌漏洞_12123选牌漏洞是什么?新车牌号自编自选技巧
- arduino使用oled代码_【惊不?】Arduino改造古董卡西欧计算器为作弊神器
- 几个非常有用的iOS学习博客链接
- java hostname host_CentOS7 修改Hostname
- mysql数据库无法显示中文_mysql数据库不能显示中文是怎么回事呢?
- latex table 表格 文字太长 自动换行
- php案例之后台数据显示-- PDO版(php data object)
- Java-final最终修饰符
- 在函数‘_start’中:对‘main’未定义的引用
- AS4120原厂单节 2A 开关型锂离子电池充电芯片
- CSS 实现元素固定宽高比
- 原生js预览ofd文件,JavaScript
- HSSFSheet设置Excel打印区 横向打印
- 2.1.4 运算放大器的等效模型、理想运算放大器的特性
- 李开复给中国大学生的第四封信——大学四年应是这样度过
热门文章
- 开发工具:推荐一款非常好用的SSH客户端WindTerm
- 金蝶账套总显示找不到服务器,金蝶标准版年结后账套找不到了
- 某人写了n封信,同时写了n个信封,然后将信任意装入信封,试编程求出每封信都装错的情况有多少种?
- 【WPS绘图】用PPT画立方八面体单晶
- 罗技无法使用计算机上的配置文件,如何解决Logitech键盘多媒体键无法使用的问题?...
- 百度李彦宏:文心一言和 ChatGPT 水平差距不是很大,也就一两个月
- shell中反引号、单引号、双引号的使用
- 安卓大学生考勤签到app毕业设计
- SuperMap iClient3D for WebGL教程(特效)- 聚光源
- Java自己动手之选择排序实现