引言：热敏打印与动态内容的需求
在零售、餐饮等 pos（销售点）系统中，热敏打印机因其成本低、速度快、维护简便等特点被广泛应用，尤其适用于打印收据、小票等凭证。react native 作为跨平台移动应用开发框架，为集成这类硬件提供了便利。然而，热敏打印通常通过发送特定的 esc/pos 命令字符串来实现内容排版和打印。当收据内容，特别是商品列表，需要根据实际交易动态变化时，传统的硬编码方式便显得力不从心。如何高效、灵活地生成这些动态内容，是开发者面临的一个常见挑战。
ESC/POS 命令基础与硬编码的局限性
ESC/POS 是一套由 Epson 公司制定的打印机控制命令集，它允许开发者通过发送特定的字节序列来控制打印机的行为，例如文本打印、字体设置、图片打印、条形码打印以及纸张控制等。在 React Native 中，通常会通过蓝牙、USB 或网络连接与打印机通信，并发送由 ESC/POS 命令组成的字符串。
以下是一个硬编码的 ESC/POS 命令示例，它定义了一张销售报告的布局和内容：
const invoiceDesign = "[L]\n" + "[L]" + "[C]SALES REPORT" + "[R]\n" + "[L]\n"+ "[L]Customer :\n" + "[L]Raymond DUPONT\n" + "[L]5 rue des girafes\n" + "[L]31547 PERPETES\n" + "[L]Tel : +33801201456\n" + "[L]\n" + "[L]\n" + "[C]Item List\n" + "[L]\n" + "[L]BEAUTIFUL SHIRT[R]\t9.99e\n" + "[L] + Size : S\n" + "[L]\n" + "[L]AWESOME HAT[R]\t24.99e\n" + "[L] + Size : 57/58\n" + "[L]\n" + "[C]-------------------------------------------------\n" + "[R]TOTAL PRICE :[R]\t34.98e\n" + "[R]TAX :[R]\t4.23e\n" + "[L]\n" + "[C]831254784551 \n" + "[L]\n" + "[C]Generated on 15-06-2023 by QuickBill\n" + "[L]\n" + "[L]\n" + "[C]End of report\n" + "[L]\n";
在这个示例中，商品名称、价格和尺寸都是直接写入字符串的。当商品列表发生变化时，开发者需要手动修改这段代码，这显然不符合动态业务的需求，也极大地增加了维护成本。
动态生成商品列表的解决方案
解决动态内容打印的核心思路是：将数据与打印格式分离，通过程序逻辑根据数据动态构建 ESC/POS 命令字符串。
1. 数据结构设计
首先，我们需要一个清晰的数据结构来表示商品信息。一个 JavaScript 数组，其中每个元素都是一个包含商品名称、价格和尺寸等属性的对象，是理想的选择：
const items = [
{ name: 'BEAUTIFUL SHIRT', price: 9.99, size: 'S' },
{ name: 'AWESOME HAT', price: 24.99, size: '57/58' },
// 更多商品...
];2. 构建动态商品列表字符串
接下来，我们可以遍历这个 items 数组，为每个商品生成对应的 ESC/POS 格式字符串，并将它们拼接起来。使用模板字面量（Template Literals）可以极大地简化字符串拼接过程，使其更具可读性。
let itemList = ''; // 初始化一个空字符串，用于存放动态生成的商品列表
items.forEach((item) => {
// 为每个商品拼接其ESC/POS格式的行
itemList +=
`[L]${item.name}[R]\t${item.price}e\n` +
`[L] + Size : ${item.size}\n` +
`[L]\n`; // 每项商品后留一行空行
});在上述代码中：
- [L] 表示左对齐，[R] 表示右对齐。
- 和 可能用于粗体显示，这取决于具体的 ESC/POS 库或打印机对 HTML 标签的解析能力。
- ${item.name}、${item.price} 和 ${item.size} 是模板字面量的占位符，它们会被对应的商品属性值替换。
- \t 表示制表符，用于在商品名称和价格之间创建间隔。
- \n 表示换行。
3. 集成到完整小票模板
最后一步是将动态生成的 itemList 字符串插入到完整的 invoiceDesign 模板中。同时，我们还可以利用 reduce 方法动态计算商品总价，使其也随商品列表的变化而更新。
完整示例代码
以下是整合了动态生成逻辑的完整 invoiceDesign 代码：
const items = [
{ name: 'BEAUTIFUL SHIRT', price: 9.99, size: 'S' },
{ name: 'AWESOME HAT', price: 24.99, size: '57/58' },
// 可以根据需要添加更多商品
];
let itemList = ''; // 用于存放动态生成的商品列表字符串
items.forEach((item) => {
itemList +=
`[L]${item.name}[R]\t${item.price}e\n` +
`[L] + Size : ${item.size}\n` +
`[L]\n`;
});
// 计算商品总价
const totalPrice = items.reduce((total, item) => total + item.price, 0).toFixed(2); // 保留两位小数
const invoiceDesign =
"[L]\n" +
"[L]" +
"[C]SALES REPORT" +
"[R]\n" +
"[L]\n"+
"[L]Customer :\n" +
"[L]Raymond DUPONT\n" +
"[L]5 rue des girafes\n" +
"[L]31547 PERPETES\n" +
"[L]Tel : +33801201456\n" +
"[L]\n" +
"[L]\n" +
"[C]Item List\n" +
"[L]\n" +
itemList + // 插入动态生成的商品列表
"[C]-------------------------------------------------\n" +
`[R]TOTAL PRICE :[R]\t${totalPrice}e\n` + // 插入动态计算的总价
"[R]TAX :[R]\t4.23e\n" + // 税费可以根据业务逻辑动态计算
"[L]\n" +
"[C]831254784551 \n" +
"[L]\n" +
"[C]Generated on 15-06-2023 by QuickBill\n" +
"[L]\n" +
"[L]\n" +
"[C]End of report\n" +
"[L]\n";
// 此时，invoiceDesign 变量包含了完整的、动态生成的小票内容，可以将其发送给打印机进行打印。注意事项与最佳实践
- ESC/POS 命令兼容性： 不同的打印机型号或 ESC/POS 库可能对某些命令的解析有所差异。例如，本例中使用的 或 标签，可能需要特定的库（如 react-native-escpos-printer）或打印机支持 HTML 标签解析。纯 ESC/POS 命令通常是字节序列，而非 HTML 标签。在实际应用中，请查阅您所使用的打印机或库的文档，以确保命令的正确性。
- 字符串模板字面量： 强烈推荐使用 ES6 的模板字面量（反引号 ``）来构建复杂的字符串，它允许内嵌表达式，使得动态内容的拼接更加直观和易读。
- 浮点数精度： 在计算总价时，JavaScript 的浮点数运算可能存在精度问题。使用 toFixed(2) 等方法可以确保结果保留所需的位数，但对于金融级别的计算，建议使用专门的库（如 decimal.js 或 big.js）以避免精度误差。
- 打印机连接与错误处理： 在实际的 React Native 应用中，需要处理打印机的连接状态、蓝牙权限、打印队列管理以及可能出现的打印错误（如纸张用尽、打印机离线等）。这些都需要额外的逻辑来确保系统的健壮性。
- 可维护性： 尽量将数据获取、数据处理（生成 itemList 和 totalPrice）与最终的 invoiceDesign 模板构建逻辑分离，保持代码的清晰和模块化。
总结
通过本教程介绍的方法，我们成功解决了在 React Native 应用中利用 ESC/POS 命令进行热敏打印时，动态生成收据内容（特别是商品列表和总价）的挑战。核心思想是利用 JavaScript 的数组遍历和字符串拼接能力，将业务数据动态地转换为符合 ESC/POS 格式的打印字符串。这种方法不仅提高了代码的灵活性和可维护性，也使得应用能够更好地适应多变的业务需求。开发者可以基于此基础，进一步扩展，实现更复杂的收据布局、多语言支持以及与后端数据的无缝集成。
