首先上界面:
左侧是编辑界面,右侧是选项内容
点保存模板时会将模板信息json话,并发送给服务器.
非常的方便.
使用的时候也很好处理,(以lodop打印插件为例)
1.序列化json字符串.
2.生成打印内容,主要是用json生成主体内容.格式如下,方法自己写
//头部内容
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />//主体内容
"<div class="finalTableBlock" style="width: 734px; height: 96px; left: 0px; top: 99px; position: absolute; z-index: 0; font-size: 10px; font-family: SimHie; font-weight: 700;;height:auto;"><table class="final-table fhddivid556929167905843309986116289table" cellpadding="0" cellspacing="1" style="line-height:18px;background-color: #000;text-align: center;border-spacing: 1px;border-collapse: separate;width: 100%;"><tr><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:28px;">序</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:49px;">图片</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:260px;">商品名称</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:109px;">商品属性</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:119px;">商家编码</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:43px;">重量</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:48px;">单价</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:39px;">小计</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:29px;">数量</th></tr><tr style="background-color:#fff;"><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">1</td><td style="background-color:#fff;word-wrap:break-word;word-break:break-all;height: 26px;"><img src="http://cbu01.alicdn.com/img/ibank/2019/032/546/11284645230.80x80.jpg" height="36" width="36" style=" outline-width:0px; vertical-align:top;"></td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">热销手表货真价实常备大量现货手表 皮革表带手表微信代理</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">颜色:咖啡</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0809</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">6.00</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">12</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">2</td></tr><tr style="background-color:#fff;"><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">2</td><td style="background-color:#fff;word-wrap:break-word;word-break:break-all;height: 26px;"><img src="http://cbu01.alicdn.com/img/ibank/2019/032/546/11284645230.80x80.jpg" height="36" width="36" style=" outline-width:0px; vertical-align:top;"></td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">热销手表货真价实常备大量现货手表 皮革表带手表微信代理</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">颜色:白色</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0809</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">6.00</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">12</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">2</td></tr><tr style="background-color:#fff;"><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">3</td><td style="background-color:#fff;word-wrap:break-word;word-break:break-all;height: 26px;"><img src="http://cbu01.alicdn.com/img/ibank/2019/032/546/11284645230.80x80.jpg" height="36" width="36" style=" outline-width:0px; vertical-align:top;"></td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">热销手表货真价实常备大量现货手表 皮革表带手表微信代理</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">颜色:红色</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0809</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">6.00</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">18</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">3</td></tr><tr style="background-color:#fff;"><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">4</td><td style="background-color:#fff;word-wrap:break-word;word-break:break-all;height: 26px;"><img src="http://cbu01.alicdn.com/img/ibank/2019/032/546/11284645230.80x80.jpg" height="36" width="36" style=" outline-width:0px; vertical-align:top;"></td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">热销手表货真价实常备大量现货手表 皮革表带手表微信代理</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">颜色:黑色</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0809</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">0</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">6.00</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">18</td><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">3</td></tr></table><div class="product-affix fhddivid556929167905843309986116289affix" style="text-align:right;line-height:18px;"><span class="tableAffix jineheji">实付款：65.4元(含运费：6元)；</span><span class="tableAffix zhongliangheji">重量：0kg；</span><span class="tableAffix baobeizongshu">共计10件商品；</span></div></div><div data-distance="" class="timeymdhis final-item " style="width: 249px; height: 31px; top: 0px; left: 481px; border: 1px dashed rgb(169, 2, 253); z-index: 7; font-size: 16px; background-color: rgb(206, 234, 206); font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">打印时间:2019-09-05 11:11:03</div><div data-distance="" class="zidingyiwenzi final-item " style="width: 27px; height: 63px; top: 30px; left: 4px; border: 1px dashed rgb(169, 2, 253); z-index: 27; font-size: 14px; background-color: rgb(169, 221, 236); font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">收件人</div><div data-distance="" class="shr-nicheng final-item " style="width: 156px; height: 27px; top: 34px; left: 361px; border: 1px dashed rgb(169, 2, 253); z-index: 19; font-size: 14px; background-color: rgb(206, 234, 206); font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">旺旺:kimaymiki22</div><div data-distance="" class="shr-dizhi final-item " style="width: 699px; height: 30px; top: 64px; left: 33px; border: 1px dashed rgb(169, 2, 253); z-index: 22; font-size: 14px; background-color: rgb(206, 234, 206); font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">收货人地址:广东省茂名市高州市大井镇农村信用社对面（宏发建材</div><div data-distance="41" class="beizhu1 final-item tableBottom" style="width: 370px; height: 47px; top: 338px; left: 4px; z-index: 25; font-size: 10px; font-weight: 700; font-family: SimHie; border: none; background-color: rgb(255, 255, 255); position: absolute;">买家留言:</div><div data-distance="" class="shr-shouji final-item " style="width: 166px; height: 26px; top: 35px; left: 192px; background-color: rgb(206, 234, 206); border: 1px dashed rgb(169, 2, 253); font-size: 14px; z-index: 20; font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">收货人手机:13689523871</div><div data-distance="" class="shr-xingming final-item " style="width: 158px; height: 25px; top: 35px; left: 33px; background-color: rgb(206, 234, 206); border: 1px dashed rgb(169, 2, 253); font-size: 14px; z-index: 21; font-family: SimHie; font-weight: 700;;border:none;background-color:#fff;position:absolute;">收货人姓名:Cecilia</div><div data-distance="" class="hengzhixian final-item " style="width: 724px; height: 2px; top: 33px; left: 7px; border-top: 1px solid rgb(0, 0, 0); z-index: 9;position:absolute;"></div><div data-distance="" class="hengzhixian final-item " style="width: 696px; height: 2px; top: 62px; left: 34px; border-top: 1px solid rgb(0, 0, 0); z-index: 13;position:absolute;"></div><div data-distance="" class="diingdanbianhao final-item " style="width: 214px; height: 25px; top: 35px; left: 519px; background-color: rgb(206, 234, 206); border: 1px dashed rgb(169, 2, 253); font-size: 14px; z-index: 13; font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">订单编号:556929167905843309</div><div data-distance="" class="zidingyiwenzi final-item " style="width: 80px; height: 29px; top: 1px; left: 327px; background-color: rgb(169, 221, 236); border: 1px dashed rgb(169, 2, 253); font-size: 16px; z-index: 10; font-weight: 700; font-family: SimHie;;border:none;background-color:#fff;position:absolute;">发货单</div><div data-distance="35" class="orderzongjine final-item tableBottom" style="width: 292px; height: 54px; top: 332px; left: 409px; font-size: 24px; z-index: 6; font-weight: 700; border: none; background-color: rgb(255, 255, 255); position: absolute;">总金额:65.4</div>"
拼接头部字符串和主体字符串
使用lodop打印插件打印
LODOP.SET_PRINT_PAGESIZE (intOrient,""+width+"mm",""+height+"",'');//设置打印纸张大小
LODOP.SET_PRINT_COPIES(printfhdnum);//打印的份数
LODOP.SET_PRINTER_INDEX(pname);//设置打印机
LODOP.ADD_PRINT_HTM(''+toply+"mm",''+leftpy+"mm",'100%','100%',printhtmlstr);
//printhtmlstr就是拼接了头部和主体字符串的变量
LODOP.SET_PRINT_STYLEA(0,"TableRowThickNess",60);//设置table分页处理
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Auto-Width");//按尺寸自动缩放
//LODOP.PREVIEW();//预览
LODOP.NEWPAGE();
var taskid=LODOP.PRINT(); //打印以上为全部代码
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
