使用Hiprint实现简单单面打印功能

打印插件很多,但是好用的不是很多,之前项目中经常使用的是lodop打印插件,但是遇见新版本的谷歌浏览器后就经常出现卡死现象,为此想把项目中常用的单页打印模块用其他插件替换,之前看过一篇使用hiprint打印插件的文章,看着使用起来不错,就在项目中尝试了一下。目前单页面打印的没问题,分页打印的暂时有点问题还未解决,以下是我在项目中使用Hiprint的介绍:

hiprint官网:hiprint

下载最新版的V2.5.3 js插件。

该插件目前是免费的,也比较轻量,无需在客户端安装相关插件,体验友好。

它支持页面设计模板,但是我没有用模板设计,用的是参数打印。

模板设计如下: 

我项目中使用的是参数打印。

function printView() {
    hiprint.init();
    var hiprintTemplate = new hiprint.PrintTemplate({ paperFooter: 340, paperHeader: 10 });
    
    var panel = hiprintTemplate.addPrintPanel();//默认添加A4大小的面板
    panel.paperNumberDisabled = true;
    
    panel.addPrintHtml({ options: { width: 180, height: 30, top: 20, left: 19, content: document.getElementById("divHead").outerHTML } });
   
    panel.addPrintHtml({ options: { width: 180, height: 30, top: 120, left: 19, content: document.getElementById("divBody").outerHTML } });
    panel.addPrintHtml({ options: { width: 180, height: 30, top: 780, left: 19, content: document.getElementById("divBottom").outerHTML } });
    
    
    hiprintTemplate.print();
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用vue-hiprint完成标签打印功能,可以按照以下步骤进行操作: 1. 安装vue-hiprint插件 可以通过npm安装vue-hiprint插件,命令如下: ```npm install vue-hiprint``` 2. 引入vue-hiprint插件 在Vue项目的main.js中引入vue-hiprint插件,代码如下: ``` import Vue from 'vue' import HiPrint from 'vue-hiprint' Vue.use(HiPrint) ``` 3. 编写标签模板 创建标签模板,可以使用HTML和CSS编写模板。例如,以下是一个2×4的标签模板: ``` <div class="label-wrapper"> <div class="label"> <div class="name">Name 1</div> <div class="address">Address 1</div> </div> <div class="label"> <div class="name">Name 2</div> <div class="address">Address 2</div> </div> <div class="label"> <div class="name">Name 3</div> <div class="address">Address 3</div> </div> <div class="label"> <div class="name">Name 4</div> <div class="address">Address 4</div> </div> </div> <style> .label-wrapper { display: flex; flex-wrap: wrap; } .label { width: 50%; height: 50%; border: 1px solid #000; padding: 10px; } .name { font-weight: bold; } .address { margin-top: 10px; } </style> ``` 4. 使用vue-hiprint组件 在Vue组件中使用vue-hiprint组件,并传入标签模板,代码如下: ``` <template> <hi-print ref="print" :debug="true"> <div class="label-wrapper"> <div class="label"> <div class="name">Name 1</div> <div class="address">Address 1</div> </div> <div class="label"> <div class="name">Name 2</div> <div class="address">Address 2</div> </div> <div class="label"> <div class="name">Name 3</div> <div class="address">Address 3</div> </div> <div class="label"> <div class="name">Name 4</div> <div class="address">Address 4</div> </div> </div> </hi-print> </template> ``` 5. 调用打印方法 在Vue组件中调用vue-hiprint打印方法,并指定打印的标签大小和数量,代码如下: ``` this.$refs.print.print({ mediaSize: { width: '2.5in', height: '1.5in' }, copies: 8 }) ``` 这样就可以完成使用vue-hiprint插件实现标签打印功能了。在调用打印方法时,可以根据需要自定义标签大小和打印的数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值