vue中加载OCX控件（IE浏览器执行）

如何注册ocx控件, 并使用new ActiveXObject(“xxx”)调用接口中的方法

ocx 控件：它是可视化编程工具，就是工具条上的那些小按钮。每个控件都有自己的事件、方法和属性。使用了控件的编程非常容易
控件需要先注册才可以使用：如果给exe文件，直接用即可

一、使用exe安装文件，并将控件注册到注册表中

• exe文件默认会安装在系统盘中，通常在 C：\Windows\SysWOW64\ 或者 C：\windows\system32\ 目录下
• 找到相应的文件，复制dll或者ocx所在文件的全路径地址
• 在管理员运行模式下，使用regsvr32注册

1. 把要注册的OCX 或者 dll 文件放在系统目录下。
   　　32位系统将其复制到 C：\windows\system32\ 目录下。
   　　64位系统将其复制到 C：\Windows\SysWOW64\ 目录下。和C：\windows\system32\目录都放一份。

2. 用“管理员身份”运行命令提示符。

开始–搜索命令提示符–右击选择以管理员身份运行。

3. 32位系统输入 regsvr32 c:\Windows\system32\xxx.ocx 回车。

64位系统输入 ：regsvr32 c:\Windows\SysWOW64\xxx.ocx 和 regsvr32 c:\Windows\system32\xxx.ocx

4. 当我们看到DllRegisterServer在C:\windows\sysWOW64\xxx.ocx 已成功的提示，那么就已经注册成功了。

二、使用控件中对应的projectId，通过new ActiveXObject(“xxx”)创建对象即可

• 打开命令行，输入regedit打开注册表
• 根据classid搜索到指定的控件
• 继续搜索下一个，可以获得对应的progressId， ··

ActiveXObject对象

JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用。
使用方法：
newObj = new ActiveXObject( servername.typename[, location])

1. servername是必选项。提供该对象的应用程序的名称。
2. typename是必选项。要创建的对象的类型或类。
3. 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

1. cmd打开窗口
2. 输入PowerShell确定，以当前用户身份启动
3. start-process PowerShell -verb runas 确定，以管理员身份启动
4. set-ExecutionPolicy RemooteSigned 确认

babel的使用

针对es6语法如何在除chrome浏览器，到更低版本的浏览器中使用js

npm install --save-dev babel-loader @babel/core @babel/preset-env

1. babel-loader 是翻译器
2. babel-core 是核心库
3. @babel/preset-env 真正的翻译（箭头函数es6 -> es5）
4. @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按需引入
                        }
                    ]
                   ]
                }
            }
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• –save 开发和项目运行都需要的依赖 (对应dependencies)
• -save-dev 开发依赖，当项目部署了就不需要了，如webpack,gulp,babel (对应devDependencies)
  npm 5 + 默认安装的模块是添加到dependencies列表中，较老的必须指定–save参数

---

前面都是废话，实操如下

使用vue加载activeX控件

1. 下载给定的ocx并运行
2. 修改配置文件，在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",
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

3. IE浏览器配置
   • 配置可信任站点，设置 ->安全 或 Internet选项 -> 安全， 找到可信站点配置：如果是在本机操作http:127.0.0.1, 如果是在mac上操作，则将启动的地址添加到可信站点即可
   • 配置自定义安全级别： 开启activeX功能
4. 添加key（因为是签名，所以需要key）
5. 最后看下控件的js代码（主要是new ActiveXObject这个对象即可）

    actx = new ActiveXObject("GXCA_GKEYINFO.GXCA_gKeyInfoCtrl.1");
    actx.xxx()即可
   1
   2