31
2024
08
00:35:18

推荐:HiPrint 免费、简单、快速的JS打印插件,快速分页预览、打印、转pdf。

最近公司在重构开发SRM,下面的IT开发人员想纯网页代码实现打印物料标签,但是他自己写的代码,页面一直有问题,闲来逛网站,发现这个好东西:HiPrint 

作为部门头,但我又不懂开发,但还是可以提供一些方向和思路,下面来介绍一下这个JS插件吧。


图片
http://hiprint.io/

介绍

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

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都已经按照用户设计的模板进行分页。所以用户使用,无需担心分页或切割元素




推荐本站淘宝优惠价购买喜欢的宝贝:

image.png

本文链接:https://www.hqyman.cn/post/7873.html 非本站原创文章欢迎转载,原创文章需保留本站地址!

分享到:
打赏





休息一下~~


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

请先 登录 再评论,若不是会员请先 注册

您的IP地址是: