vue/html 集成对接汉王esp370(标准版/谷歌版)

奇纳尼

已于 2024-04-07 16:33:48 修改

阅读量997

点赞数 4

CC 4.0 BY-SA版权

文章标签： html 前端汉王esp370签名板 vue

于 2024-03-27 15:38:38 首次发布

本文链接：https://blog.csdn.net/qq_39564710/article/details/137071539

本文详细介绍了如何在Vue3.0项目中集成汉王ESP370签名板，包括标准版和谷歌版的集成方法，涉及http-api与webSocket-api两种方式。同时，提供了Vue直接实现代替汉王笔签名的解决方案，以及C#开发软件的安装教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

汉王eqp370版本介绍（所有下面的资料都在我主页文件里面）

如何区分版本

集成标准版方式

集成谷歌版方式（http-api和webSocket-api两种方式）

汉王eqp370版本介绍（所有下面的资料都在我主页文件里面）

标准版：只支持IE版本浏览器

谷歌版：支持谷歌版本浏览器

区分汉王版本的软件：已提供

如何区分版本

集成标准版方式

原理：exe的ocx组件安装后，在本地注册表注册该设备，该设备开启自启，会与匹配版本的汉王写字板连接，然后用html文件调用ocx的classid ，用ie浏览器就可以打开手写板了，同时也会与usb连接的汉王板连接上。

步骤1：安装exe文件，安装成功后本地会ocx控件设备会在注册表注册

步骤2：只支持IE浏览器，用IE浏览器（edge浏览器要切换为IE模式）打开hanwang.html，允许此操作后，html俩面的代码会调用ocx控件弹出手写板白框

集成谷歌版方式（http-api和webSocket-api两种方式）

http-api方式

原理：安装http的exe之后，会在本地启动汉王服务端，然后html代码中调用服务端http-api接口即可

步骤：安装exe,打开测试html文件

webSocket-api方式

原理：安装http的exe之后，会在本地启动汉王服务端，然后html代码中调用服务端websocket-api接口即可

步骤：安装exe,打开测试html文件

vue3.0集成标准版汉王业务代码

1.vue页面的签名按钮

qianming()方法，window.open打开hanwangSign.html的html页面

const qianming = (res) => {
	if (dataList.selectData && dataList.selectData.length !=1) {
		proxy.$messageNew.warning("请勾选1条数据进行操作");
		return;
	}

	let deviceId  = dataList.selectData[0].deviceId;

	let value1 = '设备编号';
	let value2 = deviceId;
	let value3 = requestUrl.update2;
	let url ='/eqp-web/static/hanwangSign.html?desc='+value1+'&code='+value2+'&url='+value3+'&token='+getToken();
	window.open(url, "_blank");
};

2.hanwangSign.html文件

在html文件中的保存图片的方法中，要用ajax调用java后台接口，保存图片到业务数据上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>签名板页面</title>
    <style type="text/css">
        .style1
        {
            font-size: xx-large;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #216e9b;
        }
       .style2
        {
            font-size: 16px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #216e9b;
        }
       .style3
        {
            font-size: 12px;