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的一些经验和总结，希望对大家有所帮助！
