web打印插件hiprint的简单使用

官方地址:http://hiprint.io
火狐打印预览无法显示图片。其他浏览器兼容

var panel = hiprintTemplate.addPrintPanel({ width: 176, height: 250,paperNumberDisabled:false ,paperType:'B5'});
panel.addPrintText({ options: { width:260,height: 27,lineHeight:26, top: 11, left: 120, title: 'title', textAlign: 'center',fontSize:20,fontWeight:500 } });
panel.addPrintImage({ options: { width:150,height: 70, top: 61.5, left: 50,  src:'test.png'} });//加载图片
panel.addPrintText({ options: { width: 260, height: 27, top: 70, left: 130, title: '测试', textAlign: 'center',fontWeight:500,lineHeight:26,fontSize:18 } });
panel.addPrintText({ options: { width: 300, height: 60, top: 61.5, left: 280, title:'二维码', textType: 'qrcode'}});
var contentStr = '<table id="testTable"></table>';
panel.addPrintTable({ options: { width: 400, height: 80, top: 130, left: 50, content: contentStr } });
var printData = JSON.stringify(hiprintTemplate.getJson());
hiprintTemplate.print(printData);//弹出打印页面

其中,遇到了vue的list值改变,而引用的html未改变的问题。通过循环组装table行解决。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值