vue3使用clodop 云打印

第一步，准备打印目录print放在src目录下，在云打印官网下载安装包放入该文件夹中
第二步，加载clodop，在LodopFuncs.js写入一下代码

import { ElMessageBox } from 'element-plus'
// ====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
oscript = document.createElement('script')
//因为前端代码需要打包到服务器，所以我们的地址需要动态获取当前浏览的地址
oscript.src = location.origin+'/print/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)
// 下载loadLodop
function loadLodop() {window.open('/print/CLodop_Setup_for_Win32NT.exe')
}
// ====获取LODOP对象的主过程：====
function getLodop() {let LODOPtry {LODOP = window.CLODOP2015_7028console.log(LODOP);console.log(document.readyState);if (!LODOP) {throw new Error("您还未安装打印控件")}if (!LODOP && document.readyState !== 'complete') {ElMessageBox.alert('C-Lodop打印控件还没准备好，请稍后再试！')return}return LODOP} catch (err) {ElMessageBox({title: '温馨提示',type: 'warning',showCancelButton: true,message: '您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印',callback: res => {if (res === 'confirm') {loadLodop()}}})}
}
export default getLodop

第三步，在本地测试是能进行打印，但是部署到服务器就不行了，它会报错说缺少CLodopfuncs.js的代码，所以我们在本地测试是就要将对应CLodopfuncs.js的代码复制到前端本地项目中，然后修改其访问地址：

复制代码到print目录下的CLodopfuncs.js中。

修改其中访问地址配置：

           strWebPageID:"7BCAAAE",strTaskID:"",strHostURI:location.protocol+'//'+location.hostname+":8000/print",VERSION:"6.5.0.2",IVERSION:"6502",CVERSION:"4.1.0.4",HTTPS_STATUS:2,VERSION_EXT:true,iBaseTask:0,timeThreshold:5,Priority:1,blIslocal:true,Iframes:[],ItemDatas:{},PageData:{},defStyleJson:{},PageDataEx:{},ItemCNameStyles:{},blWorking:false,blNormalItemAdded:false,blTmpSelectedIndex:null,Caption:null,Color:null,CompanyName:null,strBroadcastMS:null,Border:null,Inbrowse:null,webskt:null,SocketEnable:false,SocketOpened:false,NoClearAfterPrint:false,On_Return_Remain:false,On_Broadcast_Remain:false,//这只是文件开始一部分片段，需要修改其访问的地址为当前浏览器访问的地址，否则就会出现跨域的情况。

第四步，webpack打包配置，因为上面的LodopFuncs.js中下载文件访问的地址是根目录，所以我们需要将print目录打包放在dist的根目录下：

module.exports = {configureWebpack: {plugins: [new CopyWebpackPlugin([{from: path.join(__dirname, 'src/print'),to: path.join(__dirname, 'dist/print'),}]),],},
}

最后封装公共方法调用云打印,大功告成。

import getLodop from '@/print/LodopFuncs.js'
//打印
/*** params *      data  需要打印的文本字符串。*/
export function print(data) {const LODOP = getLodop();if (LODOP) {LODOP.PRINT_INIT(""); //初始化LODOP.SET_PRINT_PAGESIZE('210mm', '297mm', 'A4打印'); //设置LODOP.ADD_PRINT_HTM(8, "2%", "95%", "95%", data);LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);LODOP.PREVIEW();}
}

vue3使用clodop 云打印相关推荐

C-Lodop云打印服务系统存在任意文件读取漏洞
目录漏洞概述影响版本漏洞复现漏洞修复漏洞概述 C-Lodop云打印服务器是一款非常好用且受欢迎的专业云打印软件,很实用,易操作简单,安装之后可以接收本地或者其他客户端浏览器的远程打印任务了, ...
支持lodop的服务器,C-Lodop云打印
C-Lodop云打印服务器是一款功能强大的云打印软件.在C-Lodop云打印服务器最新版中,可以支持lodop全部语法,而且该软件有着极强的兼容性,可以同时支持各种普通打印机.本地并口.窗口.网络共享 ...
Lodop云打印控件使用
1,虚拟打印机迅捷PDF虚拟打印机学习云打印时可以使用虚拟打印机,省去一些麻烦下载地址:https://www.jiakaodashi.com/dayinji/downloadsuccess- ...
通过API接口实现提交订单云打印小票、格式化日期
一.硬件介绍一台能够实现wifi自动接单的云打印机可以参考飞蛾云打印机(https://www.feieyun.com/) 二.云打印机的使用方法还是以上文提到的飞蛾云打印机为例,进行介绍: 给 ...
C-Lodop云打印服务器 v3.075
点击下载来源:C-Lodop云打印服务器 v3.075 C-Lodop云打印服务器是一款非常好用且受欢迎的专业云打印软件,很实用,易操作简单,安装之后可以接收本地或者其他客户端浏览器的远程打印任务了, ...
前端JS 云打印 LODOP实践
文章目录前言一.Lodop是什么? 二.如何使用Lodop 1.下载打印插件 2.配置打印机 3.html中植入打印控件 4.调用Lodop对应的JS相关方法接口实现打印功能三.Lodop主要方 ...
java lodop打印_Java的云打印Lodop
Lodop是一款专业的WEB打印控件,其设计目标是简单易用.功能足够强大,开创WEB打印开发的新局面. Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实 ...
微软云打印将直接与 OneDrive 集成；全球 90 多家组织敦促苹果放弃引入”儿童安全”功能计划……...
NEWS 本周新闻回顾百度发布无人车出行服务平台"萝卜快跑" 百度发布无人车出行服务平台"萝卜快跑".截至2021年上半年,百度Apollo自动驾驶出行服务已 ...
生活在别处——“Samsung Cloud Print”云打印体验
据工信部发布的数据信息显示,截至8月底,我国移动互联网用户总数已达9.46亿户规模,其中手机上网总数超过9亿户.移动互联网用户规模的不断扩大,进一步证明拥抱移动互联网已成为不可扭转的趋势,也是各互联网 ...
如何做到免驱打印_证卡打印机云打印方案
展会现场的参展观展人员的胸卡如何用云打印机实现智能化? 在家办公远程云打印如何实现? 斯科德智能云证卡打印机|API接口全自动制证机|可排版云打印机-北京斯科德科技有限公司www.fezid.co ...

vue3使用clodop 云打印

vue3使用clodop 云打印

vue3使用clodop 云打印相关推荐

最新文章

热门文章