插件使用演示

下文仅演示手动添加打印元素,可视化拖拽和配置演示请查看实例栏目


                <!-- 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: 'hiprint插件手动添加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 } });
                <!-- 椭圆 -->
    panel.addPrintOval({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });

插件样例清单

下文仅演示手动添加打印元素,可视化拖拽和配置演示请查看实例栏目