偶然间发现一个不错的纯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
    评论
一、应用场景与出发点 同一个系统中,为了解决不同的客户可能需要设计不同的单据打印模板,实现此方法可能是: 1、设计不同的自带RDLC报表文件,根据当前客户加载不同的报表并打印 2、GDI+绘图 和 打印组件 ,不同的客户创建不同的绘图XML格式的模板内容 3、其他第三方组件 主要对比一下前两种方法,第一种方法不好之处在于,不灵活,开发者必须地每个客户制订一个报表,不推荐采用。第二种方法,修改对应的模板内容就可以了, 模板内容可以是Xml文件,也可以是存放在数据库中的Xml格式字符串。推荐采用这种方法。然后这种方法的也有一个棘手问题 :如何让用户快速、方便地设计打印模板,本示例就是为了解决这个问题。 二、实现思路与原理 功能概要:设计一个界面,支持用户自由添加 要打印的项,文本,直线,图片 等,并且可以方便改变打印项的 字体、颜色、粗细、位置,设计时支持效果预览。 技术要点:GDI+绘图、拖动控件、XML解析、自定义控件 三、相关类介绍 绘图工具类:DrawHelper 实现 xml格式模板打印项 之进行互相转换,在目标画板中绘制 拖动工具类:WinHelper 实现控件的鼠标拖动,键盘移动 自定义控件:用于显示文字的文本框 TextBoxExt、用于显示直线的标签 LabelExt 主窗体代码:用于用户操作,添加,删除,编辑,打印项 详细介绍请参照我的博文:http://de.cel.blog.163.com/blog/static/51451236201472215450939/
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值