如何在vue中优雅的使用ocx控件：控件引用

最新推荐文章于 2024-04-16 10:44:58 发布

置顶 youyouwoxing1991

最新推荐文章于 2024-04-16 10:44:58 发布

阅读量1w

点赞数 3

分类专栏： vue 文章标签： vue ocx ie 控件

本文链接：https://blog.csdn.net/youyouwoxing1991/article/details/88648197

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近刚好在做一个自助机项目，限于个人技术栈，也是为了后期更新维护方便，采用了BS的形式来开发。

自助机需要控制摄像头、身份证读卡器、扫描仪、手写签名等硬件，目前只有IE的ocx控件可以提供比较好的支持，所以客户端浏览器定为IE。之前主要是用vue和element-ui来写管理后端，怎么将vue和ocx结合使用是一个全新的课题。在一通百度之后，发现网上并没有完整的例子，于是自己一番折腾，终于可以比较优雅的在vue中使用ocx了。

问题一：控件如何引用

在传统项目中，ocx控件都是以object标签的形式插入到页面，只能加载一次，但是vue的页面是动态添加和删除的，所以object标签是适合放置在vue的组件中的。最好的做法是直接将object标签添加到 index.html，这样就可以避免控件加载问题。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>xx系统</title>
</head>

<body>
  <div id="app"></div>
  <object id="CVR_IDCard" classid="clsid:10946843-7507-44FE-ACE8-2B3483D179B7" width="0" height="0"></object>
</body>

</html>

问题二：vue中怎么使用ocx对象

这个问题相对简单，直接使用 window.obj，或者直接通过id获取 document.getElementById('CVR_IDCard')，这两种方式都不会提示语法错误。个人更倾向于方式2，除了可以使用控件的方法，还能方便的改变控件样式。

// 方式 1
window.CVR_IDCard

//方式 2
document.getElementById('CVR_IDCard')

后面还有如何使用结合iframe使用ocx、怎么在vue中绑定控件事件。

youyouwoxing1991

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
5
评论
如何在vue中优雅的使用ocx控件：控件引用

最近刚好在做一个自助机项目，限于个人技术栈，也是为了后期更新维护方便，采用了BS的形式来开发。自助机需要控制摄像头、身份证读卡器、扫描仪、手写签名等硬件，目前只有IE的ocx控件可以提供比较好的支持，所以客户端浏览器定为IE。之前主要是用vue和element-ui来写管理后端，怎么将vue和ocx结合使用是一个全新的课题。在一通百度之后，发现网上并没有完整的例子，于是自己一番折腾，终于可以比...
复制链接

扫一扫