Hiprint 存在3种方式生成打印模板 托拽自定义-实例1、配置方式-实例2、调用函数方式-实例3
托拽自定义
配置方式
调用函数方式
拖拽列表
可视化结果以Json的形式存在,用户可以编辑Json实现特殊化操作,如:数据formatter,文本变色,单元格改变背景等。具体请参考文档。
可视化
编辑Json
formatter
文本变色
改变背景
hiprint 票据定位打印,用户通过拖拽矩形,椭圆,横线,竖线等来设计票据布局。然后在对应的位置填充文本。操作简单,可视化操作。几分钟时间就可以设计好一个复杂的票据模板。票据定位打印-图片背景请查看在线实例
票据定位打印-图片背景请查看在线实例
可视化票据结果以Json的形式存在,用户可以编辑Json实现特殊化操作,如:数据formatter,文本变色,单元格改变背景等。具体请参考文档。
可视化票据
点击下方快速预览即可快速生成条形码打印预览
代码生成打印模板,所有拖拽结果形成的json都可以通过代码添加的方式完成。
<!-- hiprint 打印初始化,更多参数请查看文档 --> hiprint.init(); <!-- 创建打印模板对象--> var hiprintTemplate = new hiprint.PrintTemplate(); <!-- 模板对象添加打印面板 paperHeader:页眉线 paperFooter:页尾线--> var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 }); <!-- 文本 打印面板添加文本元素--> panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hinnn插件手动添加text', textAlign: 'center' } }); <!-- 条形码 打印面板添加条形码元素--> panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } }); <!-- 二维码 打印面板添加二维码元素--> panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '二维码', textType: 'qrcode' } }); <!-- 长文本 打印面板添加长文本元素--> panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本:' } }); <!-- 表格 打印面板添加表格元素 content为字符串 --> panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } }); <!-- html 打印面板添加自定义html content为字符串或$('..') --> panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } }); <!-- 竖线 --> panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } }); <!-- 横线 --> panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } }); <!-- 矩形 --> panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });