Hiprint

hiprint 是一个web 打印的js组件，无需安装软件。支持移动端，PC端浏览器，angular,vue,react, 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生产pdf,图片更方便

hiprint 插件依赖jquery，（也就是说，jquery必须在所有插件之前引入页面），如果要使用二维码和条形码功能，需另外引入两个js组件JsBarcode.all.js和qrcode.js。此2款条码插件均是MIT协议，可以到github搜索下载最新版 


    hiprint/
    ├── css/
    │   ├── hiprint.css
    │   ├── print-lock.css
    ├── plugins/
    │   ├── JsBarcode.all.min.js
    │   └── qrcode.js
    │   └── jquery.minicolors.min.js
    │   └── jquery.hiwprint.js
    ├── hiprint.bundle.js
    ├── polyfill.min.js

Hiprint的优势

hiprint 预览结果为分页的css+html,无需安装软件，用户体验更佳，js组件,浏览器在它就在，支持移动端，PC端。跨平台 window,ios,linux 无压力。移动端无压力，性能优越，不会像软件打印造成卡顿和莫名其妙的链接失败，要求重启，Hiprint也可以很好的和支持联合软件打印使用。只要软件支持html打印即可。 生成图片，pdf 更方便。可视化操作让用户跳过繁琐的编写过程，节省用户大量工作时间。简洁，快速，稳定。三种方式任你选择：可视化拖拽，可视化配置，手动函数添加。 批量预览打印更方便，用户可以把预览的html自定义填充到任何区域中。预览结果转pdf ，图片更快速方便。

开发者和客户

hiprint 即可以让开发者进行可视化操作，提高工作效率。开发人员也可以通过配置打印元素提供给客户（非开发人员）可视化拖拽 自定义打印模板。

插件开始


 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>hinnn-hiprint</title>
    <!-- hiprint -->
    <link href="hiprint/css/hiprint.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">
   
  </head>
  <body>
    <h1>hiprint 是一款用于web打印的js组件</h1>

    <!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
    <script src="hiprint/polyfill.min.js"></script>
    <!-- hiprint 核心js-->
    <script src="hiprint/hiprint.bundle.js"></script>
    <!-- 条形码生成组件-->
    <script src="hiprint/plugins/JsBarcode.all.min.js"></script>
    <!-- 二维码生成组件-->
    <script src="hiprint/plugins/qrcode.js"></script>
    <!-- 调用浏览器打印窗口helper类，可自行替换-->
    <script src="hiprint/plugins/jquery.hiwprint.js"></script>
  </body>
 </html>

插件使用演示

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


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>hinnn-hiprint</title>
    <!-- hiprint -->
    <link href="hiprint/css/hiprint.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">

    <!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    </head>
    <body>
    <h1 >hiprint 是一款用于web打印的js组件</h1>
    <div id="templateDesignDiv" ></div>
    <!-- hiprint 打印初始化，更多参数请查看文档 -->
    <script>
    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 } });
    <!-- 打印设计 -->
    hiprintTemplate.design('#templateDesignDiv');
    </script>
    <!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
    <script src="hiprint/polyfill.min.js"></script>
    <!-- hiprint 核心js-->
    <script src="hiprint/hiprint.bundle.js"></script>
    <!-- 条形码生成组件-->
    <script src="hiprint/plugins/JsBarcode.all.min.js"></script>
    <!-- 二维码生成组件-->
    <script src="hiprint/plugins/qrcode.js"></script>
    <!-- 调用浏览器打印窗口helper类，可自行替换-->
    <script src="hiprint/plugins/jquery.hiwprint.js"></script>
    </body>
    </html>

浏览器支持

IE9+chromeFirefoxSafari hiprint 是一个web 打印的js组件，无需安装软件。支持移动端，PC端浏览器,可以在window,ios,linux 系统浏览器快速运行。