HiPrint 免费、简单、快速的JS打印插件，快速分页预览、打印、转pdf

项目地址：http://hiprint.io/

Hiprint介绍

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

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 票据定位打印，用户通过拖拽矩形，椭圆，横线，竖线等来设计票据布局。然后在对应的位置填充文本。操作简单，可视化操作。几分钟时间就可以设计好一个复杂的票据模板。票据定位打印-图片背景请查看在线实例。

条码打印测试

代码生成打印模板，所有拖拽结果形成的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:'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} });

插件样例清单

• 1. 综合实例 拖拽打印 http://hiprint.io/demo

• 2. 综合实例 配置打印 http://hiprint.io/demo/demo2

• 3. 综合实例 调用函数打印 http://hiprint.io/demo/demo3

• 4. Hiprint组件的引入 http://hiprint.io/demo/list/loadIn

• 5. 票据定位套打 http://hiprint.io/demo/list/bill

• 6. 如何使用代码生成打印模板 http://hiprint.io/demo/list/tablePrint

• 7. 如何控制纸张大小和连续打印 http://hiprint.io/demo/list/printPaper

• 8. 单个或批量打印条码 http://hiprint.io/demo/list/barCodePrint

• 9. 表格的分页打印 http://hiprint.io/demo/list/tablePrint

• 10. html分页转PDF http://hiprint.io/demo/list/htmlToPdf

• 11. 长文本的分页打印 http://hiprint.io/demo/list/longTextPaging

• 12. 批量设计模板 http://hiprint.io/demo/list/batchTemplate

• 13. 公文批文 http://hiprint.io/demo/list/officialDocument

• 14. 直接打印 http://hiprint.io/demo/list/print2

hiprint在线转PDF

1.hiprint 支持在线分页转PDF,转PDF界面与预览、打印保持一致。2.如果用户想要在服务端转pdf 操作 如：服务端使用wkhtmltopdf，可以通过模板对象的getHtml()方法获取html 传输给服务端即可，操作简单、使用便捷、保持统一、减少出错。3.利用浏览器的打印功能可以另存为pdf

<!-- data ，filename -->
hiprintTemplate.toPdf(data,"导出pdf");

<!-- scale 越大 pdf 越清晰，文件越大  默认2,建议谷歌浏览器使用-->
hiprintTemplate.toPdf(data,"导出pdf",{scale:2 });

服务端转PDF推荐

服务端转pdf 操作 如：服务端使用wkhtmltopdf体积小清晰，可以通过模板对象的getHtml()方法获取html 传输给服务端即可，操作简单、使用便捷、保持统一、减少出错。

<!-- 获取模板html -->
hiprintTemplate.getHtml(data);
<!-- 传输html 字符串到服务端-->
post...To 服务器;

PDF分页问题

无论hiprint在线转PDF还是服务器端转PDF，他们依赖的html都已经按照用户设计的模板进行分页。所以用户使用，无需担心分页或切割元素。