怎么在Vue中利用lodop实现打印

　　介绍

怎么在Vue中利用lodop实现打印?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>一。Lodop与C-Lodop的区别

Lodop打印控件是浏览器插件,与浏览器紧密结合来实现本地打印,是一种内嵌到浏览器里交互方式。(适用浏览器:即系列,火狐51版及历史版本,谷歌44版及历史版本。(新版火狐及谷歌不再支持np插件,也不能使用Lodop))

C-Lodop打印服务是以提供服务方式解决web打印,摆脱了对浏览器的依赖,解决了新版谷歌(45版及后续版本),64位火狐,边缘等浏览器不再支持Lodop插件方式的情况,C-Lodop打印服务支持所有浏览器。

既然C-Lodop可以替代Lodop并且支持所有浏览器,实际开发过程中可以直接使用C-Lodop进行完成打印需求

<强>二。vue中使用Lodop

1把官方提供的LodopFuncs.js文件保存到某个目录下,如myProject \ src \ \ LodopFuncs资产。js

2修改LodopFuncs。js文件,在文件最底部添加一行代码出口{getLodop};//导出getLodop

3在打印事件处理函数所在文件里导入该模块在打印事件函数中调用getLodop获取LODOP对象变量,按照官方教程书写自己的打印函数,通过打印预览,PRINT_DESIGN进行输出。

<强>三。实例代码

1。LodopFuncs.js由于选择了C-Lodop打印服务,也就不再需要进行对各浏览器进行判断了,也不再需要各种提示下载哪个版本的控件了

改写后的lodopFuncs。js如下图所示,项目需求中引入了元素的组件,提醒用户点击确认后下载打印控件(win32NT。exe既支持32位也支持64位的系统,也就不用对用户操作系统进行判断了直接下载安装后刷新页面使用就好)

怎么在Vue中利用lodop实现打印

2。模板模板代码

小提示:注意id放置位置,引用的是documnet.getElmentById (& # 39; tableId& # 39;)。innerHTML

怎么在Vue中利用lodop实现打印

示例:进行getLodop的引用进口getLodop & # 39;你的LodopFuncs。js的路径& # 39;

怎么在Vue中利用lodop实现打印

打印报表的方法进行代码编写,主要程序就三行代码让lodop=getLodop()//调用getLodop获取lodop对象

, LODOP.PRINT_INIT (“”) 　　 　　,LODOP.ADD_PRINT_TEXT(50, 231年,260年,39岁,“打印内容“) 　　 　　之前,LODOP.PREVIEW ()

但实际项目需求中,需要对用户进行判断,判断用户是否已安装打印服务,如果没有安装要提示用户下载安装,已安装好可以提示直接安装

打印的样式根据项目的需求也会有不同,有的是打印表格,有的是文本有的是图片,用户根据官方文档操作写样式,字体大小,横竖版设置等等

<强>四。附源码

import  {, MessageBox },得到& # 39;element-ui& # 39;//,====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====var  head =, document.head  | |, document.getElementsByTagName(& # 39;头# 39;)[0],| |,document.documentElement 　　var  oscript =, document.createElement(& # 39;脚本# 39;)//,让本机的浏览器打印(更优先一点): 　　时间=oscript  document.createElement(& # 39;脚本# 39;) 　　时间=oscript.src  & # 39; http://localhost: 8000/CLodopfuncs.js ?优先级=2 & # 39; 　　head.insertBefore (oscript, head.firstChild)//,加载双端口(8000和18000)避免其中某个端口被占用: 　　时间=oscript  document.createElement(& # 39;脚本# 39;) 　　时间=oscript.src  & # 39; http://localhost: 18000/CLodopfuncs.js ?优先级=1 & # 39; 　　head.insertBefore (oscript, head.firstChild)//,下载loadLodop 　　function  loadLodop (), { 　　,window.open(& # 39; . ./. ./静态/Lodop CLodop_Setup_for_Win32NT.exe& # 39;) 　　}//,====获取LODOP对象的主过程:====function  getLodop (), { 　　var  LODOP 　　,try  {=,,LODOP  getCLodop () 　　,if  (! LODOP ,,, document.readyState  !==, & # 39;不能# 39;),{ 　　MessageBox.alert才能(& # 39;C-Lodop打印控件还没准备好,请稍后再试! & # 39;) 　　,返回 　　,} 　　return  LODOP 　　,}catch (错),{ 　　,弹出窗口({ 　　标题:才能,& # 39;温馨提示& # 39;, 　　类型:才能,& # 39;预警# 39; 　　showCancelButton才能:,真的, 　　,,信息:& # 39;您还未安装打印控件,点击确定下载打印控件,安装成功后刷新页面即可进行打印& # 39;, 　　,,回调:res =祝辞,{ 　　if 才能;(res ===, & # 39;确认# 39;),{ 　　,,loadLodop () 　　,,} 　　,,} 　　,}) 　　,} 　　} 　　 　　export  default  getLodop

怎么在Vue中利用lodop实现打印