最近項目需要使用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的一些經驗和總結，希望對大家有所幫助！