Vue使用lodop打印摘要

A.洛多普和c罗多普的区别

Lodop打印控件是浏览器插件，与浏览器紧密结合实现本地打印，是嵌入浏览器的交互方式。(适用浏览器：ie系列、火狐51及版本历史、谷歌44及版本历史。(新的火狐和谷歌不再支持np插件，不能使用lodop))

C-Lodop打印服务通过提供服务来解决网页打印，摆脱了对浏览器的依赖，解决了谷歌新版本(45版及更高版本)、64位火狐、edge等浏览器不再支持Lodop插件模式的情况。C-Lodop打印服务支持所有浏览器。

由于C-Lodop可以替代Lodop，支持所有浏览器，因此在实际开发过程中可以直接使用C-Lodop完成打印需求

Ii .在vue使用Lodop

1将官方提供的LodopFuncs.js文件保存到一个目录中，如my project \ src \ assets \ loopfuncs . js。

2修改LodopFuncs.js文件，并在文件底部增加一行代码export { getLodop }；//导出getLodop

将模块导入print事件处理函数所在的文件中，在print事件函数中调用getLodop获取Lodop对象变量，根据官方教程编写自己的print函数，通过PRINT、PREVIEW、PRINT_DESIGN输出。

三.示例代码

1.LodopFuncs.js因为选择了C-Lodop打印服务，不再需要判断每个浏览器，也不再需要提示下载哪个版本的控件。

重写后的lodopFuncs.js如下图所示。项目需求中引入了元素组件，提醒用户点击OK后下载打印控件(win32NT.exe同时支持32位和64位系统，无需判断用户操作系统。下载安装后刷新页面即可)

2.模板模板代码

提示：注意id的位置，指documnet。getelmentbyid ('tableid ')。内容

示例：从“您的LodopFuncs.js的路径”中引用getLodop导入getLodop

打印报表的方法是编码的，主程序用三行代码调用getLodop获取Lodop对象：让LODOP=getLodop()//

循环。print _ init(“”)lodop。add _ print _ text (50，231，260，39，'打印内容')LODOP。PREVIEW()。但是在实际的项目需求中，需要判断用户是否安装了打印服务。如果没有安装，应提示您直接下载并安装。

根据项目的需要，打印样式会有所不同。有些是打印表格，有些是文本，有些是图片。用户根据公文操作编写样式、字体大小、横竖版设置等

四.附加源代码

从" element-ui"//====页面动态加载C-Lodop云打印必须的文件clodofuncs。js====var head=document。head | |文档。getelementsbytagname(' head ')[0]| |文档。document element var OS script=document。createelement(' script ')//让本机的浏览器打印（更优先一点):oscript=document。创建元素(“脚本”)脚本。src=' http://localhost :8000/clodofuncs。js？优先级=2 ' head。在(oscript，head.firstChild)之前插入/加载双端口(8000和18000)避免其中某个端口被占用：oscript=document。创建元素(“脚本”)脚本。src=' http://localhost :18000/clodofuncs。js？优先级=1 ' head。在(oscript，head.firstChild)之前插入/下载LoadLoadOpfunction LoadLoadOp(){ window。' open('././static/Lodop/CLodop _ Setup _ for _ win 32nt。exe ')}//====获取打印插件对象的主过程：====函数getLodop(){ var LODOP }如果(!打印插件文档。readyState！=='完成){ MessageBox.alert('C-Lodop打印控件还没准备好，请稍后再试!')return } return LODOP } catch(err){ MessageBox({ title : '温馨提示，类型： '警告，显示取消按钮：为真，消息： '您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印，回调： RES={ if(RES==' confirm '){ loadLodop()} } })} }导出默认getlooptemplate div class=' umes table-dialog '！-表格组-div class=' ums table-main ' div class=' title " { Tabname } }/div！-导入导出-div class=' BTN-顶级列表' El-button type=' primary ' plain @ click=' export report '导出报表/El-button El-button type=' primary ' plain @ click=' print report '打印报表/el按钮/div！-表格组-div id=' TableID ' class=' table-box ' table class='置换' captionfont face='黑体size=' 3 ' { Tabname } }/font/caption TableHead ' : key=' index ' TD v-for='(item，I)tr ' : key=' I ' : colspan=' item。cols ' :行span='项。row ' :min-width=' item。宽度“{ item。value } }/TD/tr/the ad TB body tr-v-for='-end-/div/模板脚本导入{ tableHead，tableResolve } from './excelTem/reportone。js ' import getLodop from ' @/API/lodop ' export default { data(){ return { tabd : ' '，tabName: ' '，tableHead: tableHead，tableBody: [] } }，mounted() { }，methods 3360 {//打印报表print report(){ const LODOP=getLodop()} if(LODOP){ var strBodyStyle=' style ' strBodyStyle=' table { border-top : 1 solid # 000000；边框-左侧： 1实心# 000000;边框塌陷：边框间距：0;}"strBodyStyle="标题{行高：2 em}”Strbodystyle=" TD {边框-右侧： 1实心# 000000；边框-底部： 1实心# 000000;文本对齐：居中；padd :2 px 3px font-size :11 px；}' strBodyStyle='/style' //设置打印样式var STrformHTMl=STrbodystyle ' body '文档。getelementbyid(' tableId ').innerHTML '/body' //获取打印内容LODOP .PRINT_INIT('') //初始化LODOP .SET_PRINT_PAGESIZE(2，0，0，' A4') //设置横向LODOP .ADD_PRINT_HTM('1% '、' 1% '、' 98% '、' 98% '、strFormHtml) //设置打印内容LODOP .SET_PREVIEW_WINDOW(2，0，0，800，600 ' ')//设置预览窗口模式和大小LODOP .PREVIEW() } } }}/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。