官方地址: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行解决。