React Native 热敏打印：使用 ESC/POS 命令动态生成小票内容-js教程-PHP中文网

React Native 热敏打印：使用 ESC/POS 命令动态生成小票内容

碧海醫心

发布： 2025-07-31 15:10:25

原创

941人浏览过

React Native 热敏打印：使用 ESC/POS 命令动态生成小票内容

本教程详细阐述了在 React Native 应用中，如何利用 ESC/POS 命令实现热敏打印小票内容的动态生成。针对传统硬编码方式无法适应商品列表变化的问题，文章提供了一种通过 JavaScript 数组和字符串拼接技术，动态构建打印指令的解决方案，并演示了如何集成可变商品信息和自动计算总价，确保打印布局的灵活性和可维护性。

理解 ESC/POS 命令与热敏打印

esc/pos 是一种广泛应用于热敏打印机的指令集，它允许开发者通过发送特定的控制字符序列来控制打印机的行为，例如字体大小、对齐方式、条形码打印等。在 react native 等移动应用中，通常通过蓝牙或 usb 连接与热敏打印机通信，并发送这些 esc/pos 格式的字符串以实现打印。

在实际业务场景中，小票或报告的内容（如商品列表）往往是动态变化的。如果采用硬编码的方式来定义打印内容，将难以适应这种变化，导致代码维护困难且缺乏灵活性。

动态生成小票内容的挑战与解决方案

最初，开发者可能会尝试将整个小票的布局和内容以硬编码的字符串形式定义。例如：

const invoiceDesign =
  "[L]\n" +
  "[L]" +
  "[C]<font size='big'><u>SALES REPORT</u></font>" +
  // ... 其他固定内容
  "[C]<u><font size='medium'>Item List</font></u>\n" +
  "[L]\n" +
  "[L]<b>BEAUTIFUL SHIRT</b>[R]\t9.99e\n" + // 硬编码商品
  "[L]  + Size : S\n" +
  "[L]\n" +
  "[L]<b>AWESOME HAT</b>[R]\t24.99e\n" + // 硬编码商品
  "[L]  + Size : 57/58\n" +
  "[L]\n" +
  // ... 其他固定内容

登录后复制

这种方法在商品列表固定时可行，但一旦需要打印不同数量或类型的商品，就无法满足需求。

为了解决这个问题，核心思想是将动态变化的数据（如商品列表）从静态的打印模板中分离出来，并利用编程逻辑动态地构建这部分内容。

实现动态商品列表打印

以下是实现动态商品列表打印的具体步骤和代码示例：

1. 定义商品数据结构

首先，将需要打印的商品信息组织成一个 JavaScript 数组，每个商品作为数组中的一个对象，包含其名称、价格和尺寸等属性。

啵啵动漫

一键生成动漫视频，小白也能轻松做动漫。

298

查看详情

const items = [
  { name: 'BEAUTIFUL SHIRT', price: 9.99, size: 'S' },
  { name: 'AWESOME HAT', price: 24.99, size: '57/58' },
  // 可以根据需要添加更多商品
];

登录后复制

2. 动态构建商品列表字符串

接下来，使用数组的 forEach 或 map 方法遍历商品数组，并为每个商品生成对应的 ESC/POS 格式字符串。这些字符串片段将被拼接起来，形成完整的商品列表部分。

let itemList = ''; // 初始化一个空字符串，用于存放动态生成的商品列表

items.forEach((item) => {
  itemList +=
    `[L]<b>${item.name}</b>[R]\t${item.price}e\n` + // 商品名称和价格，右对齐价格
    `[L]  + Size : ${item.size}\n` + // 商品尺寸，左对齐并缩进
    `[L]\n`; // 每件商品后添加空行以增加可读性
});

登录后复制

在这个示例中，我们使用了模板字符串（Template Literals，即反引号 `）来方便地嵌入 JavaScript 变量，使得字符串拼接更加简洁易读。[L] 表示左对齐，[R] 表示右对齐，\t 表示制表符（用于对齐价格），\n 表示换行。

3. 整合动态内容到总打印模板

最后，将动态生成的 itemList 字符串插入到完整的 invoiceDesign 模板中。同时，我们还可以利用数组的 reduce 方法动态计算总价，使其也随商品列表的变化而更新。

const invoiceDesign =
  "[L]\n" +
  "[L]" +
  "[C]<font size='big'><u>SALES REPORT</u></font>" +
  "[R]\n" +
  "[L]\n"+
  "[L]<font size='tall'>Customer :</font>\n" +
  "[L]Raymond DUPONT\n" +
  "[L]5 rue des girafes\n" +
  "[L]31547 PERPETES\n" +
  "[L]Tel : +33801201456\n" +
  "[L]\n" +
  "[L]\n" +
  "[C]<u><font size='medium'>Item List</font></u>\n" +
  "[L]\n" +
  itemList + // 插入动态生成的商品列表
  "[C]-------------------------------------------------\n" +
  // 动态计算总价
  "[R]TOTAL PRICE :[R]\t${items.reduce((total, item) => total + item.price, 0).toFixed(2)}e\n" +
  "[R]TAX :[R]\t4.23e\n" + // 税费可能需要另外计算或固定
  "[L]\n" +
  "[C]<barcode type='ean13' height='10'>831254784551</barcode>\n" +
  "[L]\n" +
  "[C]<font size='small'>Generated on 15-06-2023 by QuickBill</font>\n" +
  "[L]\n" +
  "[L]\n" +
  "[C]<font size='small'>End of report</font>\n" +
  "[L]\n";

// 此时，invoiceDesign 变量包含了完整的、动态生成的 ESC/POS 命令字符串
// 接下来，可以通过相应的 React Native 打印库（如 react-native-thermal-printer 或 react-native-escpos-printer）
// 将此字符串发送给热敏打印机进行打印。

登录后复制

在上述代码中，items.reduce((total, item) => total + item.price, 0).toFixed(2) 用于计算所有商品的总价，并保留两位小数。

注意事项

ESC/POS 命令兼容性： 不同的热敏打印机可能对 ESC/POS 命令的支持程度略有差异。在实际部署前，务必测试您的打印机对特定命令（如字体大小、条形码类型、对齐方式）的兼容性。
字符编码： 确保您的打印库和打印机支持正确的字符编码（通常是 GBK 或 UTF-8），以避免中文乱码问题。
打印机宽度限制： 热敏打印机通常有固定的打印宽度（如 3 英寸通常为 48 个字符）。在设计布局时，需严格控制每行的字符数，避免内容溢出或截断。可以使用固定宽度字体进行测试和排版。
错误处理： 在实际应用中，打印操作可能会失败（例如，打印机未连接、缺纸等）。应添加适当的错误处理机制，向用户提供反馈。
异步操作： 打印通常是异步操作，确保在打印命令发送后，应用能够正确处理打印结果或状态回调。
替代方案： 虽然 ESC/POS 提供了精细控制，但对于复杂的布局，也可以考虑将 HTML 渲染成图片或 PDF 后再进行打印。然而，对于小票打印，ESC/POS 通常效率更高且占用资源更少。

总结

通过采用 JavaScript 数组和字符串模板来动态构建 ESC/POS 打印命令，可以极大地提高 React Native 热敏打印应用的灵活性和可维护性。这种方法使得商品列表、总价等可变内容能够根据业务需求实时生成，避免了硬编码带来的限制，是构建健壮的 POS 打印解决方案的关键一步。开发者应充分理解 ESC/POS 命令，并结合实际打印机特性进行适配和测试。

以上就是React Native 热敏打印：使用 ESC/POS 命令动态生成小票内容的详细内容，更多请关注php中文网其它相关文章！