准备工作
- 制作易标签模板文件（.yix）制作教程
- 安装web打印客户端 YiLabelWebPrintService.exe
一.注册账号并激活 #
可以使用前端注册页面或调用API注册账号并激活。
使用前端注册页面注册账号并激活 #
- 打开易标签Web打印系统前端注册页面：
- https://api.yi-label.com/frontend/register.html
- 测试账号：demo@yi-label.com 密码：demo1234
- 建议免费注册一个新账号，避免数据或模板丢失。
- 填写注册信息，包括用户名、密码、公司名、邮箱等。
- 点击注册按钮，完成账号注册。
- 系统将发送激活邮件到注册时填写的邮箱。进入邮箱，点击激活链接，完成账号激活。
- 登录易标签Web打印系统前端页面：https://api.yi-label.com/frontend/login.html
- 输入注册时使用的邮箱和密码，登录系统。
- 登录后，进入“用户中心”页面。获取 API认证令牌（auth_info）。后续调用易标签Web打印系统API时，需要在请求头中包含该认证令牌。
使用API注册账号并激活 #
- 调用易标签Web打印系统API接口：POST https://api.yi-label.com/api/v1/register
- 在请求体中包含注册信息，包括用户名、密码、公司名、邮箱等。
- 发送POST请求，接收注册结果。
- 注册成功后，系统将发送激活邮件到注册时填写的邮箱。进入邮箱，点击激活链接，完成账号激活。
- 调用登录接口：POST https://api.yi-label.com/api/v1/login
- 在请求体中包含登录信息，包括邮箱和密码。
- 发送POST请求，接收登录结果。
- 登录成功后，系统将返回一个包含 API认证令牌（auth_info）的响应体。后续调用易标签Web打印系统API时，需要在请求头中包含该认证令牌。
二.上传模板 #
可以使用前端页面或调用API上传标签模板文件。
使用前端页面上传模板 #
- 打开易标签Web打印系统前端页面：https://api.yi-label.com/frontend/template-upload.html
- 登录系统后，进入“模板管理”页面。
- 点击“上传模板”按钮，选择要上传的标签模板文件。
- 填写模板名称、描述等信息。
- 点击“上传”按钮，完成模板上传。
- 上传成功后，系统将返回一个包含模板ID（file_id）的响应体。后续打印标签时，需要使用该模板ID。
使用API上传模板 #
- 调用易标签Web打印系统API接口：POST https://api.yi-label.com/api/v1/upload
- 在请求头中添加认证令牌：Authorization: Bearer auth_info
- 在请求体中包含模板文件。
- 发送POST请求，接收上传结果。
- 上传成功后，系统将返回一个包含模板ID（file_id）的响应体。后续打印标签时，需要使用该模板ID。
三.打印标签 #
基于Web的标签打印系统，主要通过WebSocket与本地易标签打印服务进行通信，实现标签预览和打印功能。同时，程序还可通过API接口获取标签模板信息。
重要提示：web打印必须安装并启动 YiLabelWebPrintService.exe 服务，否则无法正常打印标签。
核心技术实现 #
1. WebSocket通信机制 #
程序使用立即执行函数(IIFE)封装了WebSocket通信模块，通过 ws://localhost:10606 连接本地易标签打印服务。该模块包含连接管理、数据发送、错误处理等功能，采用事件驱动模式处理服务端返回的数据。
(function (webyilabel) {
var YiLabelMessage = { WebSocketInvalid: "无法连接易标签打印服务!请检查服务是否运行!" };
var YiLabel = {
//这里代码省略，详见示例文件......
};
YiLabel.CONNECT();
setTimeout(YiLabel.GET_PRINTERS, 500);
webyilabel.yiLabel = YiLabel;
})(window);
2. 事件处理机制 #
程序定义了统一的事件处理函数，处理从WebSocket接收到的数据，根据不同的命令类型执行相应操作，如预览、获取打印机列表、打印完成通知和错误处理。
//web e-label事件处理
web_YiLabel.ON_DATA = function (strMsge) {
var obj = JSON.parse(strMsge);
switch (obj.CMD) {
//这里代码省略，详见示例文件......
}
};
提示：使用易标签软件制作模板，并使用API或者前端页面上传模板，获取模板ID。剩下就专注于打印数据生成，即可完成打印任务。
3. 打印数据生成 (generatePrintData函数) #
该函数是程序的核心功能之一，用于生成标签打印所需的数据。它定义了标签中包含的6个字段（产品名称、品牌、型号、二维码信息、描述和代码），并提供了3组示例数据。
function generatePrintData() {
// 定义标签中的列名称，对应标签设计中的字段标识
const cols = ["pname", "pbrands", "podel", "pqrcode", "pdescription", "pcode"];
const vals = [
// 第一个标签的数据
["智能手机Pro Max", // pname: 产品名称
"科技先锋", // pbrands: 产品品牌
"型号A2023", // podel: 产品型号
"QRCODE123456789", // pqrcode: 二维码信息
"高性能智能手机，支持5G网络，超大容量电池", // pdescription: 产品描述
"SPH-2023-001" // pcode: 产品代码
],
// 第二个标签的数据
["无线蓝牙耳机", // pname: 产品名称
"声音大师", // pbrands: 产品品牌
"型号B400", // podel: 产品型号
"QRCODE987654321", // pqrcode: 二维码信息
"主动降噪，长续航，舒适佩戴体验", // pdescription: 产品描述
"HP-2023-002" // pcode: 产品代码
],
// 第三个标签的数据
["智能手表Series 5", // pname: 产品名称
"健康伴侣", // pbrands: 产品品牌
"型号W500", // podel: 产品型号
"QRCODE567890123", // pqrcode: 二维码信息
"全面健康监测，运动追踪，防水设计", // pdescription: 产品描述
"SW-2023-003" // pcode: 产品代码
]
];
return { cols, vals };
}
4. 模板获取 (API调用) #
程序在页面加载完成后，通过Fetch API从远程服务器获取标签模板信息。它使用了Bearer认证方式，并指定了需要获取的字段列表。获取到数据后，程序会动态更新模板下拉选择框。
window.onload = function() {
file_id = 55; // 替换为实际的file_id
const apiUrl = 'https://api.yi-label.com/api/v1/file/' + file_id + '?fields=file_name,file_name12';
const authorization = '*****-****-*****-*****'; // 实际使用中请通过安全方式获取此令牌
fetch(apiUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${authorization}`,
'Content-Type': 'application/json'
}
})
.then(response => { /* 处理响应 */ })
.then(data => {
const selLabel = document.getElementById('selLabel');
selLabel.innerHTML = '';
const option = document.createElement('option');
let fileName = '未知文件名';
let fileName12 = 'default_value';
try {
const apiData = data.data || data;
fileName = apiData.file_name || '未知文件名';
fileName12 = apiData.file_name12 || 'default_value';
document.getElementById('txtMsg').value = `获取的字段数据:\nfile_name: ${fileName}\nfile_name12: ${fileName12}`;
} catch (e) { /* 错误处理 */ }
option.value = fileName12;
option.textContent = fileName;
selLabel.appendChild(option);
})
.catch(error => { /* 异常处理 */ });
};
安全提示：以上代码示例中的认证令牌仅用于演示，实际使用中请通过安全方式管理认证信息。
更多API接口介绍 ：易标签Web打印系统API文档
5. 预览和打印功能 #
程序实现了标签预览和打印功能，通过获取用户选择的打印机、模板和旋转角度，结合 generatePrintData 函数生成的数据，构建打印命令并通过WebSocket发送给本地打印服务。
函数 btn_Preview 和 btn_Print 分别对应预览和打印操作。
两个在线示例的模板下载：api_test_1.yix 和 api_test_2.yix
在线打印示例：打开示例后可右键查看完整代码
免费商用许可
本服务由易标签官方提供，支持标签模板可视化管理和API直接调用，可免费商用。
免费用户的使用须知：web打印的网页端必须在 footer 中添加 使用易标签打印服务的声明信息，并添加链接指向 （https://www.yi-label.com/b-s-web-print）
- 英文版权示例： Powered By YiLabel Web Print Service
- 中文版权示例：由易标签网络打印服务提供技术驱动
未添加声明信息的网页端，将被视侵权使用，可能会被限制访问或被追究法律责任。如需移除声明信息，请购买成为付费用户。
私有化部署
项目已开源：https://gitee.com/elable/Label-Template-Management-System
购买Web打印授权，请联系易标签客服。support@yi-label.com