LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

WEB免费纯JS打印控件hiprint推荐

admin
2024年3月2日 12:4 本文热度 91

一个跨平台的web打印插件,自动分页 hiprint 官网  http://hiprint.io/  

hiprint 是一个 web 打印的js组件,无需安装软件。支持移动端、PC端浏览器、angular、vue、react, 等分页预览、打印,操作简单,运行快速。预览界面为css+html 。支持数据分组,批量预览。生成pdf、图片更方便,可以在Window,ios,linux 系统浏览器快速运行。可视化配置模板,自动分页打印。

hiprint 插件依赖jquery,(也就是说,jquery必须在所有插件之前引入页面),如果要使用二维码和条形码功能,需另外引入两个js组件JsBarcode.all.jsqrcode.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>

  <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>

    <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 系统浏览器快速运行。


该文章在 2024/3/2 12:37:26 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved