vue中加载OCX控件(IE浏览器执行)
vue中加载ocx控件,其实就是new实例,就行了。
如何注册ocx控件, 并使用new ActiveXObject(“xxx”)调用接口中的方法
ocx 控件:它是可视化编程工具,就是工具条上的那些小按钮。每个控件都有自己的事件、方法和属性。使用了控件的编程非常容易
控件需要先注册才可以使用:如果给exe文件,直接用即可
一、使用exe安装文件,并将控件注册到注册表中
- exe文件默认会安装在系统盘中,通常在 C:\Windows\SysWOW64\ 或者 C:\windows\system32\ 目录下
- 找到相应的文件,复制dll或者ocx所在文件的全路径地址
- 在管理员运行模式下,使用regsvr32注册
-
把要注册的OCX 或者 dll 文件放在系统目录下。
32位系统将其复制到 C:\windows\system32\ 目录下。
64位系统将其复制到 C:\Windows\SysWOW64\ 目录下。和C:\windows\system32\目录都放一份。 -
用“管理员身份”运行命令提示符。
开始–搜索命令提示符–右击选择以管理员身份运行。
- 32位系统输入 regsvr32 c:\Windows\system32\xxx.ocx 回车。
64位系统输入 :regsvr32 c:\Windows\SysWOW64\xxx.ocx
和 regsvr32 c:\Windows\system32\xxx.ocx
- 当我们看到DllRegisterServer在C:\windows\sysWOW64\xxx.ocx 已成功的提示,那么就已经注册成功了。
二、使用控件中对应的projectId,通过new ActiveXObject(“xxx”)创建对象即可
- 打开命令行,输入regedit打开注册表
- 根据classid搜索到指定的控件
- 继续搜索下一个,可以获得对应的progressId, ··
ActiveXObject对象
JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用。
使用方法:
newObj = new ActiveXObject( servername.typename[, location])
- servername是必选项。提供该对象的应用程序的名称。
- typename是必选项。要创建的对象的类型或类。
- location是可选项。创建该对象的网络服务器的名称。
切记:ActiveX是微软的东西,故而这玩意儿只有IE才支持!
对IE浏览器操作(开启internet的加载activex控件) (默认开启)
打开Internet Explorer “工具”的“Internet选项”一栏—“安全”----“自定义级别”选项卡 ---- 》“对没有标记为安全的activex控件进行初始化和脚本运行”设置成“启用”即可。
npm切换镜像以及解决cnpm无法使用的问题(windows)
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm无法加载问题:以管理员身份打开powershell
- cmd打开窗口
- 输入PowerShell确定,以当前用户身份启动
- start-process PowerShell -verb runas 确定,以管理员身份启动
- set-ExecutionPolicy RemooteSigned 确认
babel的使用
针对es6语法如何在除chrome浏览器,到更低版本的浏览器中使用js
npm install --save-dev babel-loader @babel/core @babel/preset-env
- babel-loader 是翻译器
- babel-core 是核心库
- @babel/preset-env 真正的翻译(箭头函数es6 -> es5)
- @babel/polyfill 功能强大
npm install --save @babel/polyfill
// promise(类,对象) 和 map方法,—》打包为带有实线的函数
全局引入 import '@babel/polyfill'
按需引入 webpack配置
// webpack中的配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env',
{
useBuiltIns: 'usage' // 告诉@babel/polyfill按需引入
}
]
]
}
}
}
]
}
- –save 开发和项目运行都需要的依赖 (对应dependencies)
- -save-dev 开发依赖,当项目部署了就不需要了,如webpack,gulp,babel (对应devDependencies)
npm 5 + 默认安装的模块是添加到dependencies列表中,较老的必须指定–save参数
前面都是废话,实操如下
使用vue加载activeX控件
- 下载给定的ocx并运行
- 修改配置文件,在IE中执行(需要配置babel)
// vue.config.js
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
// 生产环境构建后的存放目录
outputDir: './dist',
// 是否生成 js sourcemap 文件,设置为 false 以满足安全测试要求
productionSourceMap: false,
css: {
// 是否生成 css sourcemap 文件,设置为 false 以满足安全测试要求
sourceMap: false
},
configureWebpack: {
resolve: {
alias: {
'gxcaJs': resolve('src/utils/ggzy.js') // 导入ocx文件
}
}
},
// 需要babel转义的包
transpileDependencies: ['microapp-plugin-apploader', 'microapp-framework-common', 'microapp-plugin-http']
};
// babel.config.js
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry'
},
'stage-3'
]
]
}
// package.json
{
"name": "pub_source",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
]
}
- IE浏览器配置
- 配置可信任站点,设置 ->安全 或 Internet选项 -> 安全, 找到可信站点配置:如果是在本机操作http:127.0.0.1, 如果是在mac上操作,则将启动的地址添加到可信站点即可
- 配置自定义安全级别: 开启activeX功能
- 添加key(因为是签名,所以需要key)
- 最后看下控件的js代码(主要是new ActiveXObject这个对象即可)
actx = new ActiveXObject("GXCA_GKEYINFO.GXCA_gKeyInfoCtrl.1"); actx.xxx()即可
更多推荐
所有评论(0)