Hiprint 存在3种方式生成打印模板 托拽自定义-实例1、配置方式-实例2、调用函数方式-实例3

  • 拖拽列表
    • 文本
    • 图片
    • 长文
    • 表格
    • html
  • 辅助
    • 横线
    • 竖线
    • 矩形
    • 椭圆
  • A3
  • A4
  • A5
  • B3
  • B4
  • B5
  • 自定义
  • 旋转
  • 清空
  • 快速预览
  • 打印

可视化结果以Json的形式存在,用户可以编辑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 } });

打印预览