vue下使用lodop打印图片
最近项目需要使用web打印机,寻找了一下,发现好多人都在使用lodop这个插件,于是,决定使用这个插件进行图片打印。
1.百度lodop,可以轻松找到这个插件的官网,可以看到许多完整的资料,比如,在线样例,常见问题等等,还有官方的QQ交流群,话不多说,按照样例进行插件下载安装。
2.引入项目,把LodopFuncs.js复制到你的项目中,然后在你的vue文件中引入即可。代码如下:
3.我这次的需求是循环拼接打印图片,因为我也不太会使用vue,所以就引入了jquery去操作拼接图片,以下说是我的代码:
LODOP = getLodop()//调用getLodop获取LODOP对象
LODOP.PRINT_INIT("");
var obj;
this.$http.get("后台方法路径").then(res => {
obj = res.result;
//console.log(obj);
for(var i =0 ; i<obj.length;i++){
if(obj[i]){
LODOP.SET_PRINT_PAGESIZE(0,"21cm","30cm",0);
//指定打印机编号或者名称,只要有打印任务数据,直接取第一条记录或者打印机编号即可。
LODOP.SET_PRINTER_INDEX(obj[i][0].dyjbh);
let objArr = [];
for(var j =0; j<obj[i].length;j++){
objArr.push(obj[i][j].id);
var childerDiv =$('<div class="childerDiv" style="margin-left: 4pt;margin-top: 8pt;width:282pt;height:195pt;float:left;overflow:hidden;position: relative">'+
'<label class="deptName" style="position: absolute;top:4px;z-index:2;font-size:12;color:red">'+obj[i][j].deptName+'</label>'+
'<span class="cjh" style="position: absolute;padding-left: 90pt;padding-top: 165pt;z-index:2;color: red;font-size: 15;font-weight: bold">'+obj[i][j].cjh+'</span>'+
'<label class="dyjbh" style="position: absolute;padding-left: 40pt;padding-top: 180pt;z-index:2;color: red;font-size: 12;font-weight: bold">'+obj[i][j].dyjbh+'</label>'+
'<label class="dysj1" style="position: absolute;top:15px;z-index:2;font-size:12;color:red">'+year+'-'+month+'-'+day+'</label>'+
'<label class="dysj2" style="position: absolute;top:27px;z-index:2;font-size:12;color:red">'+hour+':'+minute+':'+second+'</label>'+
'<img border="0" class="img" style="width:95%;height:98%;z-index:1;position:absolute;left:0px " src="http://www.lodop.net/demolist/PrintSample8.jpg" />'+
'<label class="cph" style="font-size:13;top:2px;right: 2pt;z-index:2;color: blue;position:absolute;writing-mode: tb-rl;">'+'● '+obj[i][j].cph+'</span>'+
'</div>');
childerDiv.appendTo($("#parentDiv"));
//D:/files/images/'+obj[i][j].hczp
}
var strBodyStyle="<style>.parentDiv{width:1000pt;height:1000pt;overflow: hidden}"+
".childerDiv{margin-left: 4pt;margin-top: 8pt;width:282pt;height:195pt;float:left;overflow:hidden;position: relative}"+
".deptName{position: absolute;top:4px;z-index:2;font-size:12;color:red}"+
".cjh{position: absolute;padding-left: 90pt;padding-top: 165pt;z-index:2;color: red;font-size: 15;font-weight: bold}"+
".dyjbh{position: absolute;padding-left: 40pt;padding-top: 180pt;z-index:2;color: red;font-size: 12}"+
".dysj1{position: absolute;top:15px;z-index:2;font-size:12;color:red}"+
".dysj2{position: absolute;top:27px;z-index:2;font-size:12;color:red}"+
".img{width:95%;height:98%;z-index:1;position:absolute;left:0px }"+
".cph{font-size:13;top:2px;right: 2pt;z-index:2;color: blue;position:absolute;writing-mode: tb-rl;}"+
"</style>";
var strFormHtml=strBodyStyle+"<body>"+document.getElementById("parentDiv").innerHTML+"</body>";
LODOP.ADD_PRINT_HTM(10,0,1100,11000,strFormHtml);
LODOP.PRINT();//这边是直接打印
//LODOP.PREVIEW(); 这是打印预览
//LODOP.PRINT_DESIGN(); 打印设置,双击可以获取到你的html代码
//打印完成以后,可以进行其他的逻辑操作,这边最好是要获取到真实的打印状态,然后去修改相应数据的打印状态,或者是其他的一些操作逻辑。
4.说下中间遇到的一些坑吧:
(1).打印html页面的时候,样式会带不过去,需要你采用以下这种方式去把样式带过去
var strFormHtml=strBodyStyle+""+document.getElementById(“parentDiv”).innerHTML+"";
(2).img的src路径只能是网络图片或者是本地的绝对地址,这个可以参考样例8,里面有说明;
(3).如果遇到你写的样式在打印预览中没有生效,那你就需要通过获取你的代码进行观察了,因为有的时候,样式不一定支持,需要你换一种方式去实现。
好了!以上就是我这次使用lodop的一些经验和总结,希望对大家有所帮助!