打印组件接入文档

<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: '张三', Sex: '男', Nation: '汉', Birth: '19900101',
  //   Address: '北京市海淀区中关村大街1号',
  //   IDCardNo: '110108199001011234',
  //   Department: '北京市公安局海淀分局',
  //   ValidStart: '20200101', ValidEnd: '20400101',
  //   PhotoBase64: 'data:image/bmp;base64,...'  // 按驱动不同可能为 JPG
  // }
  console.log('读到身份证', ev.data);
});
wacp.on('idCardError',        function (ev) { console.error('读卡错误', ev.data); });
wacp.on('idCardDisconnected', function () { /* 提示用户重插 */ });

// 选择型号 + 开启读卡
wacp.switchIDCardReader('HS100N')
    .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);
    });
}

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