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

vue下使用lodop打印图片相关推荐

Lodop打印图片（工作记录）
实现效果:Lodop打印图片,并在图片上添加文字. 工具包:LodopFuncs.js(度娘下载获取) 直接上代码: <!DOCTYPE html> <html><hea ...
如何取消浏览器护眼色 Lodop打印图片有窗口颜色的边框
Lodop打印图片出现了边框,然而通常情况下是没有边框的,由于Lodop是基于本机的ie进行解析的,和IE的设置有关. 用户的电脑和习惯千差万别,有人喜欢给浏览器加上护眼色,而这一个行为可能导致Lod ...
vue项目使用LODOP打印小票功能
毕业后第一份工作是做后台管理系统的,项目中要求有打印小票功能,然而我并不知道,该怎么写,百度了很多.一开始在网上查到很多都在用electron+vue我以为我可以用这个呢,搞了两天,才发现这是做桌面软 ...
ssm lodop打印图片不显示
在打印预览的时候图片就是不显示最终解决方案就是修改过滤器转载于:https://www.cnblogs.com/NCL--/p/11051687.html
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
vue使用lodop打印插件
首先将lodop安装包放到static下下载地址:http://www.c-lodop.com/download.html 新建一个vue测试lodop功能 LodopFuncs.js var Cr ...
html图片打印不出来 lodop_记录Canvas用于LODOP打印的解决过程
工作中遇到用canvas绘制了图片,需要打印出来的需求.由于设备限制遇到了不少奇葩问题.在解决过程中学会了不少知识,在此记录下,希望能对同样遇到此类问题的朋友有所帮助. 将 Canvas 转为 png ...
判断指定目录下的所有［图片］的扩展名, 并打印出文件名.
1 package test; 2 3 /* 4 * 需求: 判断指定目录下的所有［图片］的扩展名, 并打印出文件名. 5 * 6 * */ 7 import java.io.File; 8 impo ...
Lodop打印较大的超出纸张的图片
ADD_PRINT_IMAGE打印图片时,如果一个图片过大,超出纸张,默认超出部分是不显示的,也不会分页. 最近遇到有人利用ADD_PRINT_URL打印图片,说图片自动分了多页,因为这个方法一般是用 ...

vue下使用lodop打印图片

vue下使用lodop打印图片相关推荐

最新文章

热门文章