打印组件接入文档

<script src="https://your-webapi.com/printtemplate/wacp.js"></script>
<script>
  var wacp = new Wacp();
</script>

// 打开设计器（独立窗口）
wacp.openDesigner(
  'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6',   // Token（必填，服务端校验通过后才加载设计器）
  {
    templateData: myTplContent,            // 传入已有模板内容进行编辑；留空则新建
    dpi: 203,                              // 新建画布初始 DPI（203 / 300 / 600）
    dataSourceFields: {
      userName: '姓名',
      orderId:  '工号'
    }
  },
  function (ev) {
    if (ev.error) {
      console.error('[wacp] 设计器返回错误:', ev.error);
      return;
    }
    // ev.templateContent 为模板完整内容，由三方自行存储
    localStorage.setItem('myTplContent', JSON.stringify(ev.templateContent));
    console.log('模板已保存，templateContent:', ev.templateContent);
  }
);

// 不传名称：本地以 templateId 作为显示名
wacp.sendTemplate('my_template_id', myTplContent)
  .then(function (info) {
    // info = { templateId, name }
    console.log('模板已下发到本地:', info.templateId, info.name);
  })
  .catch(function (err) {
    // 常见错误：本地 ClientPrinter 未运行（acp:// 唤起失败）/ templateData 为空
    alert('下发失败：' + err.message);
  });

// 传入中文名称：客户端下拉列表中会显示"工号牌-2026版"
wacp.sendTemplate('my_template_id', myTplContent, '工号牌-2026版');

// 单步打印：直接传入模板内容，SDK 自动下发 + 打印
wacp.print('my_template_id', {
  rows: [
    { userName: '张三', orderId: 'A001' },
    { userName: '李四', orderId: 'A002' }
  ],
  copies: 1
}, myTplContent)
.then(function (res) {
  console.log('已下达打印任务:', res);
})
.catch(function (err) {
  console.error('打印失败:', err.message);
});

// 分步打印：先 sendTemplate 下发，后续打印仅传 templateId
wacp.sendTemplate('my_template_id', myTplContent).then(function () {
  return wacp.print('my_template_id', { rows: [{ userName: '张三', orderId: 'A001' }], copies: 1 }, myTplContent);
});

wacp.on('connected', function () { console.log('客户端已连接'); });
wacp.on('printed',   function (e) { console.log('打印完成', e); });
wacp.on('error',     function (e) { console.error('SDK 错误', e); });

// 写入（同名键会被覆盖）
wacp.setItems({
  deptName: '行政部',
  userName: '张三',
  lastTplId: 'tpl_20260520_xxx'
});

// 读取：返回只包含存在的 key
wacp.getItems(['deptName', 'userName']).then(function (m) {
  console.log(m.deptName, m.userName); // 行政部 张三
});

// 删除
wacp.removeItems(['deptName']);

// 订阅读卡事件（在调用 setIDCardReaderEnabled(true) 之前订阅以免丢事件）
wacp.on('idCardRead', function (ev) {
  // ev.data 示例：
  // {
  //   Name: '张三', Gender: '男', Ethnicity: '汉', BirthDate: '19900101',
  //   Address: '北京市海淀区中关村大街1号',
  //   IDNumber: '110108199001011234',
  //   IssueAuthority: '北京市公安局海淀分局',
  //   ValidFrom: '20200101', ValidTo: '20400101',
  //   PhotoBase64: '/9j/4AAQSkZJRgABAQ...'   // 仅 IDR210 有值，其他型号为空字符串
  //   ReadTime: '2026-10-17 10:30:00',
  //   ReaderType: 'IDR210'
  // }
  console.log('读到身份证', ev.data);

  // 渲染头像（PhotoBase64 不含 data: 前缀，需要自己拼）
  if (ev.data.PhotoBase64) {
    var img = document.getElementById('avatar');
    img.src = 'data:image/bmp;base64,' + ev.data.PhotoBase64;
  } else {
    console.warn('当前读卡器（' + ev.data.ReaderType + '）不支持头像读取');
  }
});
wacp.on('idCardError',        function (ev) { console.error('读卡错误', ev.data); });
wacp.on('idCardDisconnected', function () { /* 提示用户重插 */ });

// 1) 获取本机支持的读卡器列表（前端动态渲染下拉框时用）
wacp.getIDCardReaderList().then(function (r) {
  // r.readers: [{ type: 'IDR210', name: '明泰 iDR210' }, ...]
  // r.current: 当前型号；r.enabled: 当前开关
  console.log('支持的读卡器', r.readers, '当前:', r.current, '开关:', r.enabled);
});

// 2) 选择型号 + 开启读卡（用列表返回的 type 字段切换）
wacp.switchIDCardReader('IDR210')
    .then(function () { return wacp.setIDCardReaderEnabled(true); })
    .then(function (r) { console.log('读卡已开启', r); });

// 1）创建桌面快捷方式
wacp.createDesktopShortcut('打印组件 Demo',
    'https://tools.eainfor.com/printtemplate/demo-printer.html');

// 2）查询本机通道号
wacp.getClientNum().then(function (r) { console.log(r.clientNum); });

// 3）集中作业中零凌时清队
wacp.clearPrintTasks();

// 发起截图（会弹出本机截图工具，用户框选 → 标注 → 上传）
wacp.screenshot()
  .then(function (result) {
    // result.imageBase64 为 JPEG Base64（含 data:image/jpeg;base64, 前缀）
    if (!result.imageBase64) {
      console.warn('截图返回空数据');
      return;
    }

    // 1）直接预览
    var img = document.createElement('img');
    img.src = result.imageBase64;
    document.body.appendChild(img);

    // 2）或上传到自己的服务器
    var base64Only = result.imageBase64;
    if (base64Only.indexOf('data:') === 0) {
      base64Only = base64Only.split(',')[1];
    }
    var binary = atob(base64Only);
    var bytes = new Uint8Array(binary.length);
    for (var i = 0; i < binary.length; i++) {
      bytes[i] = binary.charCodeAt(i);
    }
    var blob = new Blob([bytes], { type: 'image/jpeg' });
    var fd = new FormData();
    fd.append('file', blob, 'screenshot.jpg');

    fetch('/api/upload', { method: 'POST', body: fd })
      .then(function (resp) { return resp.json(); })
      .then(function (data) { console.log('上传成功', data); })
      .catch(function (err) { console.error('上传失败', err); });
  })
  .catch(function (err) {
    // 超时：用户 120 秒内未完成操作
    // 取消：用户在截图工具栏点击「取消」
    console.error('截图失败：', err.message);
  });

// 推荐：配合 connected 事件，确保客户端就绪后再发起截图
var ready = false;
wacp.on('connected', function () { ready = true; });

function takeScreenshot() {
  if (!ready) {
    alert('请先启动 ClientPrinter 客户端');
    return;
  }
  var btn = document.getElementById('btnScreenshot');
  btn.textContent = '⏳ 截图中...';
  btn.disabled = true;

  wacp.screenshot()
    .then(function (r) {
      btn.textContent = '📷 发起截图';
      btn.disabled = false;
      if (r.imageBase64) {
        console.log('截图成功，数据长度:', r.imageBase64.length);
      }
    })
    .catch(function (err) {
      btn.textContent = '📷 发起截图';
      btn.disabled = false;
      console.error('截图失败', err.message);
    });
}

// 场景 A：打开当前页面的 Chrome Kiosk 全屏版，浏览器自动关闭
wacp.openNativeWebView().then(
  function () { console.log('✅ Chrome Kiosk 已启动'); },
  function (err) {
    // 常见错误：Chrome 未安装 / ClientPrinter 未运行
    alert('打开失败：' + err.message);
  }
);

// 场景 B：打开指定的 Kiosk 页面，保留浏览器窗口（用于调试）
wacp.openNativeWebView({
  url: 'https://your-site.com/kiosk/employee-checkin',
  closeBrowser: false
});

// 场景 C：Kiosk 里的页面自己调 closeNativeWebView 退出
var wacp = new Wacp();
document.getElementById('btnExit').onclick = function () {
  // 可选：先做自己的密码校验（Kiosk 里无关闭按钮，密码由网页自己管）
  var pwd = prompt('请输入退出密码');
  if (pwd === 'exit2026') {
    wacp.closeNativeWebView();  // ClientPrinter 会 kill Chrome 进程
  }
};

画布像素宽 = widthMm × dpi ÷ 25.4
画布像素高 = heightMm × dpi ÷ 25.4