React Native实现3英寸POS热敏打印机动态商品列表打印求助

要实现商品列表的动态变更，核心是把硬编码的商品片段替换为基于商品数据数组动态生成的字符串，同时可扩展实现总价、税费的自动计算，以下是具体实现方案：

1. 定义商品与客户的数据结构 #

先把需要动态传入的数据结构化，方便后续复用和修改：

// 示例商品数组，可根据业务逻辑动态获取（比如从订单数据中读取）
const items = [
  { name: 'BEAUTIFUL SHIRT', price: 9.99, size: 'S' },
  { name: 'AWESOME HAT', price: 24.99, size: '57/58' },
  // 可随时添加/删除商品项
];

// 客户信息也可动态传入
const customerInfo = {
  name: 'Raymond DUPONT',
  addressLine1: '5 rue des girafes',
  addressLine2: '31547 PERPETES',
  phone: '+33801201456'
};

2. 编写动态生成商品列表的工具函数 #

遍历商品数组，生成对应的ESC/POS指令片段：

const generateItemsSection = (items) => {
  let itemsText = '';
  items.forEach(item => {
    // 拼接单个商品的指令行
    itemsText += `[L]<b>${item.name}</b>[R]\t${item.price}e\n`;
    itemsText += `[L]  + Size : ${item.size}\n`;
    itemsText += "[L]\n";
  });
  return itemsText;
};

3. 动态计算总价与税费 #

替代硬编码的总价和税费，基于商品数据自动计算：

const calculateTotal = (items) => {
  // 计算所有商品总价并保留两位小数
  return items.reduce((sum, item) => sum + item.price, 0).toFixed(2);
};

const calculateTax = (total, taxRate = 0.12) => {
  // 按指定税率计算税费，默认12%，可根据需求调整
  return (total * taxRate).toFixed(2);
};

4. 整合生成完整的小票指令 #

把动态片段插入到原有小票模板的对应位置，生成最终的ESC/POS指令：

const generateInvoice = (customer, items, taxRate = 0.12) => {
  const total = calculateTotal(items);
  const tax = calculateTax(total, taxRate);
  const itemsSection = generateItemsSection(items);
  const currentDate = new Date().toLocaleDateString('fr-FR'); // 动态生成当前日期

  return `[L]\n` +
    "[L]" +
    "[C]<font size='big'><u>SALES REPORT</u></font>" +
    "[R]\n" +
    "[L]\n"+
    "[L]<font size='tall'>Customer :</font>\n" +
    `[L]${customer.name}\n` +
    `[L]${customer.addressLine1}\n` +
    `[L]${customer.addressLine2}\n` +
    `[L]Tel : ${customer.phone}\n` +
    "[L]\n" +
    "[L]\n" +
    "[C]<u><font size='medium'>Item List</font></u>\n" +
    "[L]\n" +
    itemsSection +
    "[C]-------------------------------------------------\n" +
    `[R]TOTAL PRICE :[R]\t${total}e\n` +
    `[R]TAX :[R]\t${tax}e\n` +
    "[L]\n" +
    "[C]<barcode type='ean13' height='10'>831254784551</barcode>\n" +
    "[L]\n" +
    `[C]<font size='small'>Generated on ${currentDate} by QuickBill</font>\n` +
    "[L]\n" +
    "[L]\n" +
    "[C]<font size='small'>End of report</font>\n" +
    "[L]\n";
};

5. 使用示例 #

只需传入动态的客户和商品数据，即可生成对应小票：

// 可根据实际业务场景替换为真实订单数据
const dynamicItems = [
  { name: 'BEAUTIFUL SHIRT', price: 9.99, size: 'S' },
  { name: 'COOL PANTS', price: 39.99, size: 'M' }
];

const invoiceDesign = generateInvoice(customerInfo, dynamicItems);

这样修改后，商品列表会完全跟随传入的items数组变化，新增、删除或修改商品都无需改动小票模板的核心结构，同时总价、税费和日期也实现了动态化。

内容的提问来源于stack exchange，提问作者Shashank Srihari