偶然间发现一个不错的纯JS打印模块的WEB在线设计模板,立刻download下来

1 篇文章 0 订阅

首先上界面:

左侧是编辑界面,右侧是选项内容

点保存模板时会将模板信息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
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值