蓝印RPA HTML组件与客户端交互接口帮助文档

核心说明：HTML组件中会导出一个_lanyin全局对象，通过此变量里的方法跟蓝印客户端进行交互。

📚 API目录速览

一、流程控制类方法

1. stopFlow() - 停止流程
功能说明：停止当前正在运行的RPA流程
参数：无
返回值：无
使用范例：
// 点击按钮停止流程
document.getElementById('stopFlowBtn').addEventListener('click', function() {
  _lanyin.stopFlow();
  alert('流程已停止');
});
2. continueFlow() - 继续流程
功能说明：继续暂停状态的RPA流程
参数：无
返回值：无
使用范例：
// 点击按钮继续流程
document.getElementById('continueFlowBtn').addEventListener('click', function() {
  _lanyin.continueFlow();
  alert('流程已继续运行');
});
3. pauseFlow() - 暂停流程
功能说明：暂停当前正在运行的RPA流程
参数：无
返回值：无
使用范例：
// 点击按钮暂停流程
document.getElementById('pauseFlowBtn').addEventListener('click', function() {
  _lanyin.pauseFlow();
  alert('流程已暂停');
});

二、子流程调用类方法

1. runFlow(funcname) - 无参数执行子流程
功能说明：调用指定名称的子流程，无入参
参数：
参数名类型说明
funcnamestring子流程名称
返回值：无
使用范例：
// 点击按钮调用无参数子流程
document.getElementById('runFlowBtn').addEventListener('click', function() {
  // 调用无参数子流程
  _lanyin.runFlow("子流程1");
  alert('子流程已调用（无参数）');
});
2. runFlowEx(funcname, params) - 带参数执行子流程
功能说明：调用指定名称的子流程，并传入JSON格式参数
参数：
参数名类型说明
funcnamestring子流程名称
paramsobject入参，JSON对象格式（如：{"变量名":"值"}）
注意：从输入框获取的参数为字符串，需先转为JSON对象再传入
返回值：无
使用范例：
// 点击按钮调用带参数子流程
document.getElementById('runFlowExBtn').addEventListener('click', function() {
  let params = {"变量名1":"参数值","变量名2":true}
  try {
    // 调用带参数子流程
    _lanyin.runFlowEx(flowName, params);
    alert('带参数子流程已调用');
  } catch (e) {
    alert('参数格式错误');
  }
});

三、配置读写类方法

1. saveCfg(key, value) - 保存配置到本地
功能说明：将指定内容以键值对形式保存到本地配置
参数：
参数名类型说明
keystring配置项唯一标识（key值）
value任意类型保存内容（不能是元素对象或函数方法）
返回值：无
使用范例：
// 点击按钮保存配置
document.getElementById('saveCfgBtn').addEventListener('click', function() {
  // 获取key和value
  let key = document.getElementById('cfgKey').value;
  let value = document.getElementById('cfgValue').value;
  // 保存到本地配置
  _lanyin.saveCfg(key, value);
  alert('配置保存成功');
});
2. readCfg(key, defvalue, callback) - 从本地读取配置
功能说明：根据key读取本地配置，无配置时返回默认值
参数：
参数名类型说明
keystring配置项唯一标识（key值）
defvalue任意类型无配置时返回的默认值（不能是元素对象或函数方法）
callbackfunction回调函数，参数为读取到的配置值
返回值：无（结果通过回调函数返回）
使用范例：
// 点击按钮读取配置
document.getElementById('readCfgBtn').addEventListener('click', function() {
  // 获取key和默认值
  let key = document.getElementById('cfgKey').value;
  let defValue = document.getElementById('cfgDefValue').value;
  // 读取本地配置
  _lanyin.readCfg(key, defValue, function(res) {
    // 回调函数中获取读取结果
    alert('读取到的配置值：' + res);
  });
});

四、窗口管理类方法

1. maxsizeWnd() - 设置窗口最大化
功能说明：将当前窗口设置为最大化状态
参数：无
返回值：无
使用范例：
// 点击按钮最大化窗口
document.getElementById('maxsizeWndBtn').addEventListener('click', function() {
  _lanyin.maxsizeWnd();
});
2. minisizeWnd() - 设置窗口最小化
功能说明：将当前窗口设置为最小化状态
参数：无
返回值：无
使用范例：
// 点击按钮最小化窗口
document.getElementById('minisizeWndBtn').addEventListener('click', function() {
  _lanyin.minisizeWnd();
});
3. showWnd() - 显示窗口
功能说明：显示隐藏状态的当前窗口
参数：无
返回值：无
使用范例：
// 点击按钮显示窗口
document.getElementById('showWndBtn').addEventListener('click', function() {
  _lanyin.showWnd();
});
4. showNormalWnd() - 显示正常态窗口
功能说明：将窗口恢复为正常尺寸（非最大化/最小化）
参数：无
返回值：无
使用范例：
// 点击按钮恢复正常窗口尺寸
document.getElementById('showNormalWndBtn').addEventListener('click', function() {
  _lanyin.showNormalWnd();
});
5. closeWnd() - 关闭窗口
功能说明：关闭当前窗口
参数：无
返回值：无
使用范例：
// 点击按钮关闭窗口
document.getElementById('closeWndBtn').addEventListener('click', function() {
  _lanyin.closeWnd();
});
6. getWndWidth(callback) - 获取窗口宽度
功能说明：获取当前窗口的宽度值
参数：
参数名类型说明
callbackfunction回调函数，参数为获取到的窗口宽度值
返回值：无（结果通过回调函数返回）
使用范例：
// 点击按钮获取窗口宽度
document.getElementById('getWndWidthBtn').addEventListener('click', function() {
  _lanyin.getWndWidth(function(width) {
    // 回调函数中获取宽度值
    alert('当前窗口宽度：' + width + 'px');
    // 也可赋值到输入框显示
    document.getElementById('wndWidthInput').value = width;
  });
});
7. getWndHeight(callback) - 获取窗口高度
功能说明：获取当前窗口的高度值
参数：
参数名类型说明
callbackfunction回调函数，参数为获取到的窗口高度值
返回值：无（结果通过回调函数返回）
使用范例：
// 点击按钮获取窗口高度
document.getElementById('getWndHeightBtn').addEventListener('click', function() {
  _lanyin.getWndHeight(function(height) {
    // 回调函数中获取高度值
    alert('当前窗口高度：' + height + 'px');
    // 也可赋值到输入框显示
    document.getElementById('wndHeightInput').value = height;
  });
});
8. enableTopWnd(enable) - 设置窗口置顶
功能说明：开启或取消当前窗口置顶
参数：
参数名类型说明
enablebooltrue=开启置顶，false=取消置顶
返回值：无
使用范例：
// 点击按钮开启窗口置顶
document.getElementById('enableTopWndBtn').addEventListener('click', function() {
  _lanyin.enableTopWnd(true);
  alert('窗口已开启置顶');
});

// 点击按钮取消窗口置顶
document.getElementById('disableTopWndBtn').addEventListener('click', function() {
  _lanyin.enableTopWnd(false);
  alert('窗口已取消置顶');
});
9. setWndWidth(width) - 设置窗口宽度
功能说明：设置当前窗口的宽度值
参数：
参数名类型说明
widthint窗口宽度值（整数）
注意：参数需为整数类型，若从输入框获取需确保为有效数字
返回值：无
使用范例：
// 点击按钮设置窗口宽度
document.getElementById('setWndWidthBtn').addEventListener('click', function() {
  // 获取输入框中的宽度值（转为整数）
  let width = parseInt(document.getElementById('wndWidthInput').value);
  if (!isNaN(width)) {
    _lanyin.setWndWidth(width);
    alert('窗口宽度已设置为：' + width + 'px');
  } else {
    alert('请输入有效的宽度数值');
  }
});
10. setWndHeight(height) - 设置窗口高度
功能说明：设置当前窗口的高度值
参数：
参数名类型说明
heightint窗口高度值（整数）
注意：参数需为整数类型，若从输入框获取需确保为有效数字
返回值：无
使用范例：
// 点击按钮设置窗口高度
document.getElementById('setWndHeightBtn').addEventListener('click', function() {
  // 获取输入框中的高度值（转为整数）
  let height = parseInt(document.getElementById('wndHeightInput').value);
  if (!isNaN(height)) {
    _lanyin.setWndHeight(height);
    alert('窗口高度已设置为：' + height + 'px');
  } else {
    alert('请输入有效的高度数值');
  }
});

五、文件选择类方法

1. openFileDialog(options, callbackName) - 打开文件选择框
功能说明：从HTML页面发起客户端原生文件选择对话框，可指定标题、文件类型过滤、是否允许多选、初始目录等常用选项。
参数：
参数名类型说明
optionsobject/string选择框选项。支持title、nameFilters、accept、suffixes、allowMultiple、folder
callbackNamestringHTML侧全局回调函数名。支持如onPickFile或app.onPickFile这类路径
options说明：
选项名类型说明
titlestring对话框标题，例如：选择图片
nameFiltersarrayQt文件过滤器，例如：["Images (*.png *.jpg)", "All files (*)"]。优先级高于accept和suffixes
acceptstring类似HTML input accept写法，例如：.png,.jpg,image/*
suffixesarray后缀数组，例如：["txt", ".pdf"]
allowMultiplebooltrue=允许多选，false=单选
folderstring初始目录，建议使用file:///C:/Users这类URL格式
返回值：requestId字符串。选择结果通过callbackName指定的回调函数返回
回调参数：{res, accepted, requestId, urls, paths}
使用范例：
// 选择图片文件，允许多选
window.onPickImages = function(result) {
  if (result.accepted) {
    console.log('选择的文件路径：', result.paths);
    alert('已选择' + result.paths.length + '个文件');
  } else {
    alert('用户取消选择');
  }
};

document.getElementById('pickImagesBtn').addEventListener('click', function() {
  let requestId = _lanyin.openFileDialog({
    title: '选择图片',
    accept: '.png,.jpg,.jpeg,image/*',
    allowMultiple: true,
    folder: 'file:///C:/Users'
  }, 'onPickImages');
  console.log('文件选择请求ID：', requestId);
});
说明：nameFilters适合精确控制过滤器显示文本；accept和suffixes适合更接近HTML表单的写法。
2. openFolderDialog(options, callbackName) - 打开文件夹选择框
功能说明：从HTML页面发起客户端原生文件夹选择对话框，用于选择目录路径。
参数：
参数名类型说明
optionsobject/string选择框选项。支持title、folder
callbackNamestringHTML侧全局回调函数名。选择完成或取消时调用
返回值：requestId字符串。选择结果通过callbackName指定的回调函数返回
回调参数：{res, accepted, requestId, urls, paths}
使用范例：
// 选择文件夹
window.onPickFolder = function(result) {
  if (result.accepted) {
    let folderPath = result.paths[0];
    console.log('选择的文件夹：', folderPath);
    document.getElementById('folderInput').value = folderPath;
  } else {
    alert('用户取消选择');
  }
};

document.getElementById('pickFolderBtn').addEventListener('click', function() {
  _lanyin.openFolderDialog({
    title: '选择保存目录',
    folder: 'file:///C:/Users'
  }, 'onPickFolder');
});

五、页面初始化类方法

1. window.onLoadEnd() - 页面加载完成回调
功能说明：页面初始化完成时触发的回调方法，用于在页面加载完成后执行初始化逻辑（如读取配置、设置窗口尺寸、初始化数据等）
参数：无
返回值：无
注意：该方法是挂载在window对象上的回调函数，不是_lanyin对象的方法，需直接实现该函数来接收页面加载完成的消息
使用范例：
// 页面加载完成后执行初始化操作
window.onLoadEnd = function() {
  console.log('页面加载完成，开始初始化...');
  
  // 1. 初始化窗口尺寸显示
  _lanyin.getWndWidth(function(width) {
    document.getElementById('wndWidthInput').value = width;
  });
  _lanyin.getWndHeight(function(height) {
    document.getElementById('wndHeightInput').value = height;
  });
  
  // 2. 读取本地配置并初始化输入框
  _lanyin.readCfg('用户名', '默认用户', function(res) {
    document.getElementById('usernameInput').value = res;
  });
  
  // 3. 其他初始化操作
  alert('页面初始化完成！');
};
常见使用场景：
1. 页面加载完成后自动读取本地配置并填充到界面
2. 初始化窗口尺寸、位置等界面属性
3. 预加载需要展示的数据
4. 绑定页面元素的事件监听（也可放在DOMContentLoaded中）

六、完整示例页面（可直接运行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蓝印RPA交互示例</title>
<style>
body { padding: 20px; line-height: 1.8; }
.item { margin: 15px 0; }
button { margin: 0 5px; padding: 5px 10px; }
input, textarea { margin: 0 5px; padding: 5px; }
</style>
</head>
<body>
<h1>蓝印RPA HTML交互示例</h1>
<div style="color: #d8000c; background-color: #ffbaba; padding: 10px; border-left: 4px solid #d8000c; margin: 10px 0;"> 核心说明：HTML组件中会导出一个_lanyin全局对象，通过此变量里的方法跟蓝印客户端进行交互。 </div>
<br>
<!-- 流程控制 -->
<div class="item">
<h3>流程控制</h3>
<button id="stopFlowBtn">停止流程</button>
<button id="continueFlowBtn">继续流程</button>
<button id="pauseFlowBtn">暂停流程</button>
</div>

<!-- 配置读写 -->
<div class="item">
<h3>配置读写</h3>
<div>
key：<input type="text" id="cfgKey" value="姓名">
默认值：<input type="text" id="cfgDefValue" value="蓝印RPA">
<button id="readCfgBtn">读取配置</button>
</div>
<div>
key：<input type="text" id="cfgKey2" value="姓名">
value：<input type="text" id="cfgValue" value="张三">
<button id="saveCfgBtn">保存配置</button>
</div>
</div>

<!-- 窗口管理 -->
<div class="item">
<h3>窗口管理</h3>
<button id="maxsizeWndBtn">最大化窗口</button>
<button id="minisizeWndBtn">最小化窗口</button>
<button id="showNormalWndBtn">正常窗口</button>
<button id="enableTopWndBtn">开启置顶</button>
<button id="disableTopWndBtn">取消置顶</button>
<br><br>
窗口宽度：<input type="text" id="wndWidthInput">
<button id="getWndWidthBtn">获取宽度</button>
<button id="setWndWidthBtn">设置宽度</button>
<br>
窗口高度：<input type="text" id="wndHeightInput">
<button id="getWndHeightBtn">获取高度</button>
<button id="setWndHeightBtn">设置高度</button>
</div>

<!-- 子流程调用 -->
<div class="item">
<h3>子流程调用</h3>
子流程名称：<input type="text" id="flowName" value="子流程1">
参数：<textarea id="params" style="width:300px;height:80px;">{"变量名1":"参数值"}</textarea>
<button id="runFlowBtn">无参数调用</button>
<button id="runFlowExBtn">带参数调用</button>
</div>

<!-- 文件选择 -->
<div class="item">
<h3>文件选择</h3>
文件路径：<input type="text" id="filePathInput" style="width:420px;" readonly>
<button id="pickFileBtn">选择图片文件</button>
<br>
文件夹路径：<input type="text" id="folderPathInput" style="width:420px;" readonly>
<button id="pickFolderBtn">选择文件夹</button>
</div>

<script>
// 流程控制
document.getElementById('stopFlowBtn').addEventListener('click', function() {
_lanyin.stopFlow();
alert('流程已停止');
});
document.getElementById('continueFlowBtn').addEventListener('click', function() {
_lanyin.continueFlow();
alert('流程已继续');
});
document.getElementById('pauseFlowBtn').addEventListener('click', function() {
_lanyin.pauseFlow();
alert('流程已暂停');
});

// 配置读写
document.getElementById('readCfgBtn').addEventListener('click', function() {
let key = document.getElementById('cfgKey').value;
let defValue = document.getElementById('cfgDefValue').value;
_lanyin.readCfg(key, defValue, function(res) {
alert('读取结果：' + res);
});
});
document.getElementById('saveCfgBtn').addEventListener('click', function() {
let key = document.getElementById('cfgKey2').value;
let value = document.getElementById('cfgValue').value;
_lanyin.saveCfg(key, value);
alert('配置保存成功');
});

// 窗口管理
document.getElementById('maxsizeWndBtn').addEventListener('click', function() {
_lanyin.maxsizeWnd();
});
document.getElementById('minisizeWndBtn').addEventListener('click', function() {
_lanyin.minisizeWnd();
});
document.getElementById('showNormalWndBtn').addEventListener('click', function() {
_lanyin.showNormalWnd();
});
document.getElementById('enableTopWndBtn').addEventListener('click', function() {
_lanyin.enableTopWnd(true);
alert('已开启窗口置顶');
});
document.getElementById('disableTopWndBtn').addEventListener('click', function() {
_lanyin.enableTopWnd(false);
alert('已取消窗口置顶');
});
document.getElementById('getWndWidthBtn').addEventListener('click', function() {
_lanyin.getWndWidth(function(width) {
document.getElementById('wndWidthInput').value = width;
alert('窗口宽度：' + width + 'px');
});
});
document.getElementById('setWndWidthBtn').addEventListener('click', function() {
let width = parseInt(document.getElementById('wndWidthInput').value);
if (!isNaN(width)) {
_lanyin.setWndWidth(width);
alert('宽度已设置为：' + width + 'px');
} else {
alert('请输入有效数字');
}
});
document.getElementById('getWndHeightBtn').addEventListener('click', function() {
_lanyin.getWndHeight(function(height) {
document.getElementById('wndHeightInput').value = height;
alert('窗口高度：' + height + 'px');
});
});
document.getElementById('setWndHeightBtn').addEventListener('click', function() {
let height = parseInt(document.getElementById('wndHeightInput').value);
if (!isNaN(height)) {
_lanyin.setWndHeight(height);
alert('高度已设置为：' + height + 'px');
} else {
alert('请输入有效数字');
}
});

// 子流程调用
document.getElementById('runFlowBtn').addEventListener('click', function() {
let flowName = document.getElementById('flowName').value;
_lanyin.runFlow(flowName);
alert('无参数子流程已调用');
});
document.getElementById('runFlowExBtn').addEventListener('click', function() {
let flowName = document.getElementById('flowName').value;
let paramsStr = document.getElementById('params').value;
try {
let params = JSON.parse(paramsStr);
_lanyin.runFlowEx(flowName, params);
alert('带参数子流程已调用');
} catch (e) {
alert('参数格式错误：' + e.message);
}
});

// 页面加载完成后初始化窗口尺寸
// 文件选择
window.onPickFile = function(result) {
if (result.accepted) {
document.getElementById('filePathInput').value = result.paths.join(';');
alert('已选择文件：' + result.paths.join(';'));
} else {
alert('已取消文件选择');
}
};
window.onPickFolder = function(result) {
if (result.accepted) {
document.getElementById('folderPathInput').value = result.paths[0];
alert('已选择文件夹：' + result.paths[0]);
} else {
alert('已取消文件夹选择');
}
};
document.getElementById('pickFileBtn').addEventListener('click', function() {
_lanyin.openFileDialog({
title: '选择图片文件',
accept: '.png,.jpg,.jpeg,image/*',
allowMultiple: true,
folder: 'file:///C:/Users'
}, 'onPickFile');
});
document.getElementById('pickFolderBtn').addEventListener('click', function() {
_lanyin.openFolderDialog({
title: '选择文件夹',
folder: 'file:///C:/Users'
}, 'onPickFolder');
});

window.onLoadEnd = function() {
console.log('页面初始化完成，自动加载窗口尺寸...');
_lanyin.getWndWidth(function(width) {
document.getElementById('wndWidthInput').value = width;
});
_lanyin.getWndHeight(function(height) {
document.getElementById('wndHeightInput').value = height;
});
// 可在此处添加更多初始化逻辑，如读取配置、初始化数据等
};
</script>
</body>
</html>