SpringBoot+Element-UI实现加载ActiveX控件

公司接了一个项目用SpringBoot+Element-UI实现的，最早的时候并没有想起来说要用ActiveX控件。快做完了来一个这个项目要用高拍仪……高拍仪我这边是用到良田的（），我一脸懵逼，网上查了说vue不支持控件……那怎么办？后来还是看到了不少文章说能实现。然后研究了一段时间因为个人原因请假了，交由另外一个同事，也研究了一段时间，还是没什么突破，最后又交到我的手上，然后再次交由我的时间是周三，然后领导过来，这周必须完成，完不成也得完成，是在完不成还是得完成，好吧硬着头皮开始了……废话不说了直接上代码。
加载插件的代码

<OBJECT ID="EloamGlobal_ID" CLASSID="CLSID:52D1E686-D8D7-4DF2-9A748B8F4650BF73"></OBJECT>

不能直接写在<template>里面
1.你需要加载几个控件就在<template>里面写几个div<div ref="captrueWrapper"  style="height:0px" />
<div ref="scanOtherPhoto"  style="height:0px" />
```

这里就是插入div得位置

在这个位置加入代码： mounted vue的钩子函数

 mounted () {// object标签不能直接写在template里面 要用节点插入的方式this.$refs.captrueWrapper.innerHTML = '<OBJECT ID="EloamGlobal_ID" CLASSID="CLSID:52D1E686-D8D7-4DF2-9A74-8B8F4650BF73"></OBJECT>'setTimeout(() => {this.$refs.scanOtherPhoto.innerHTML = '<OBJECT ID="ViewMain" CLASSID="CLSID:26BA9E7F-78E9-4FB8-A05C-A4185D80D759" WIDTH="0" HEIGHT="0"></OBJECT>'}, 500)// 由于页面中有多处使用到同一ocx方法，避免重复创建进行对应的判断处理创建对应的object元素window.idcardOCX = this.$refs.captrueWrapper.children[0]},

后面加载的时候

// 读取身份证信息ReadIDCard () {let EloamGlobal = window.idcardOCXEloamGlobal.InitDevs()if (EloamGlobal.InitIdCard()) {var ret = EloamGlobal.ReadIdCard()if (ret) {var str = EloamGlobal.GetIdCardData(8)this.dataForm.identification = strthis.dataForm.location = EloamGlobal.GetIdCardData(7)this.dataForm.studentName = EloamGlobal.GetIdCardData(1)var sex = EloamGlobal.GetIdCardData(2)if (sex === '男') {this.dataForm.sex = 1} else {this.dataForm.sex = 0}this.imgBroadcastList.imgBase64 = EloamGlobal.GetIdCardImage(1).GetBase64(0, 0)//  获取身份证头像this.uploadPicture('IDPhoto')} else {this.dataForm.identification = '请放入有效身份证！'}EloamGlobal.StopIdCardDiscern()// 每读取一次身份信息都需要关闭才能进行下一次读取EloamGlobal.DeinitIdCard()} else {this.dataForm.identification = '初始化二代证阅读失败！'EloamGlobal.StopIdCardDiscern()EloamGlobal.DeinitIdCard()}},

// 各证件材料拍摄(主像头)
scan1 (photoType) {
this.imgBroadcastList.imgBase64 = ‘’
var ViewMain = document.getElementById(‘ViewMain’)
var arrayDevAssist = []
let EloamGlobal = window.idcardOCX
EloamGlobal.InitDevs()// 初始化设备
EloamGlobal.VideoCapInit()// 初始化摄像头
var DeviceMain = EloamGlobal.CreateDevice(1, 1)// 参数（1表示视频设备，1表示主摄像头）
if (DeviceMain) {
arrayDevAssist.push(DeviceMain)
var VideoAssist = arrayDevAssist[0].CreateVideo(0, 0)
ViewMain.SelectVideo(VideoAssist)// 开启摄像头。这个方法必须的调用，不然不会成功的！
var image = VideoAssist.CreateImage(0, ViewMain.GetView())
if (image) {
// alert(‘进入image’)
// var Name = ‘E://photoSpace//’ + this.GetTimeString() + ‘.jpg’//本地测试地址
// var Name = ‘/home/kfzs/upload/PhotoMaterial/’ + this.GetTimeString() + ‘.jpg’ // 服务器地址
// image.Save(Name, 0)
// console.log(Name)
// this.imgBroadcastList.imgPath = Name
// console.log(this.imgBroadcastList)
this.imgBroadcastList.imgBase64 = image.GetBase64(2, 0)
this.uploadPicture(photoType)
image.Destroy()
image = null
}
EloamGlobal.DeinitIdCard()
}
},

 GetTimeString () {var date = new Date()var yy = date.getFullYear().toString()var mm = (date.getMonth() + 1).toString()var dd = date.getDate().toString()var hh = date.getHours().toString()var nn = date.getMinutes().toString()var ss = date.getSeconds().toString()var mi = date.getMilliseconds().toString()var ret = yy + mm + dd + hh + nn + ss + mireturn ret},

 //  拍照直接上传到服务器方法很简单只是我的照片好几种类型看着比较复杂//直接将图片的base64的字符串传到后台进行解析保存就好了uploadPicture (photoType) {//   alert('进入上传阶段')this.$http['post']('/sys/oss/uploadBase64Img', this.imgBroadcastList).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)} else if (photoType === 'IDPhoto') {this.dataForm.studentPhotos = res.data.src} else if (photoType === 'PreEducation') {this.dataForm.preQualificationCertificate = res.data.src} else if (photoType === 'proofOfAlienOrigin') {this.dataForm.proofOfAlienOrigin = res.data.src} else if (photoType === 'identityChange') {this.dataForm.identityChange = res.data.src} else {}}).catch(() => {})},
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20190402153331350.png)
以上js中的方法均来自插件，记得要安装完驱动才能用里面的方法。
最后附上后台代码对base64的转换

//根据
@PostMapping(“uploadBase64Img”)
@ApiOperation(value = “上传文件”)
@RequiresPermissions(“sys:oss:uploadImg”)
public Result<Map<String, Object>> uploadBase64Img(@RequestBody Map<String, Object> map) throws Exception {
StringBuffer sb = new StringBuffer();
sb.append(“data:image/jpeg;base64,”);
sb.append(map.get(“imgBase64”).toString());//加上这两句才能正常的转换为图片
MultipartFile multipartFile = Base64DecodeMultipartFile.base64Convert(sb.toString());
//然后后面就是你们自己对图片的处理的代码了


本文自创，某些地方如有侵权之处联系作者删除，谢谢。

SpringBoot+Element-UI实现加载ActiveX控件相关推荐

VB6.0动态加载ActiveX控件漫谈[转]
[转帖]VB6.0动态加载ActiveX控件漫谈http://www.7880.com/Info/Article-4b559560.html 熟悉VB的朋友对使用ActiveX控件一定不会陌生,众多控 ...
php 无法加载activex,IE怎么无法加载 Activex 控件？
IE怎么无法加载 Activex 控件?很多小伙伴知道ActiveX 控件是一种可重用的软件组件,通过使用 ActiveX控件,可以很快地在网址.台式应用程序.以及开发工具中加入特殊的功能.下面,小编 ...
php 无法加载activex,IE无法加载 Activex 控件的解决办法
ActiveX 控件是一种可重用的软件组件,通过使用 ActiveX控件,可以很快地在网址.台式应用程序.以及开发工具中加入特殊的功能.如,StockTicker控件可以用来在网页上即时地加入活动信息 ...
html 自动加载activex控件,管理加载项未显示加载控件
已安装控件,但是在"管理加载项"中"所有加载项"中就是这个: 已安装的控件只有在网页调用此控件时才会在加载项里出现 IE加载项没有禁用Flash Player为 ...
网页加载ActiveX控件
我在做网页加载在ActiveX控件需要按一下步骤进行: 1.管理员权限打开终端:输入 regsvr32 xxx.ocx 2.regedit打开注册表,搜索xxx.ocx对应的uuid 3.编写测试ht ...
登入系统后加载ActiveX控件已被阻止的解决方法
在登入系统之后,系统会自动加载控件,所以浏览器安全级别太高的话是无法加载的,所以要对浏览器进行设置,下面是在加载控件时经常出现的错误,如下图. ActiveX控件已被阻止交互不安全的提示浏览 ...
解决IE8/IE9无法加载Activex控件问题
1.以管理员身份运行IE浏览器先关闭IE浏览器,然后从开始菜单中找到 Internet Explorer,右击,选择"以管理员身份运行",然后重新打开网站安装 ActiveX 控 ...
NTKO OFFICE控件手动安装，解决IE浏览器无法加载 Activex 控件的解决办法
NTKO OFFICE控件手动安装在安装ntko之前先要查看本地ie浏览器的版本,1.如果是ie9及ie9以上的浏览器,可以直接参考下面的办法,2.如果是ie8的话那就要先找到本地32位的浏览器,在 ...
一种基于谷歌浏览器加载activex控件的解决方法与流程技术_Office控件使用总踩雷？畅写Office带你云端飞行...
使用Office必然绕不开控件.但是Office控件使用过程中却问题频发.比如控件下载.安装.配置.启动Office.文档打开.参数传递等过程都会出现诸多问题,浪费了很多不必要得时间成本:
动态加载用户控件的怪问题
动态加载用户控件的时候,会因为调用一些控件的一些属性和方法而造成控件命名混乱. 因为add 一个用户控件或者 loadcontrol 的时候如果没有指定控件的id,clientid,那么它会初始id ...

SpringBoot+Element-UI实现加载ActiveX控件

SpringBoot+Element-UI实现加载ActiveX控件相关推荐

最新文章

热门文章