React Native 热敏打印实践：利用 ESC/POS 命令构建动态收据-js教程-PHP中文网

React Native 热敏打印实践：利用 ESC/POS 命令构建动态收据

霞舞

发布： 2025-07-31 15:04:11

原创

516人浏览过

React Native 热敏打印实践：利用 ESC/POS 命令构建动态收据

本教程详细介绍了如何在 React Native 应用中利用 ESC/POS 命令实现热敏打印动态收据。针对传统硬编码小票内容难以适应业务变化的痛点，文章提出并演示了通过 JavaScript 数组遍历和字符串拼接技术，动态生成商品列表及总价的方法。通过这种方式，开发者可以灵活地构建和打印个性化、实时更新的销售小票，提升应用的实用性和可维护性。

引言：热敏打印与动态内容的需求

在零售、餐饮等 pos（销售点）系统中，热敏打印机因其成本低、速度快、维护简便等特点被广泛应用，尤其适用于打印收据、小票等凭证。react native 作为跨平台移动应用开发框架，为集成这类硬件提供了便利。然而，热敏打印通常通过发送特定的 esc/pos 命令字符串来实现内容排版和打印。当收据内容，特别是商品列表，需要根据实际交易动态变化时，传统的硬编码方式便显得力不从心。如何高效、灵活地生成这些动态内容，是开发者面临的一个常见挑战。

ESC/POS 命令基础与硬编码的局限性

ESC/POS 是一套由 Epson 公司制定的打印机控制命令集，它允许开发者通过发送特定的字节序列来控制打印机的行为，例如文本打印、字体设置、图片打印、条形码打印以及纸张控制等。在 React Native 中，通常会通过蓝牙、USB 或网络连接与打印机通信，并发送由 ESC/POS 命令组成的字符串。

以下是一个硬编码的 ESC/POS 命令示例，它定义了一张销售报告的布局和内容：

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" +
  "[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" +
  "[C]-------------------------------------------------\n" +
  "[R]TOTAL PRICE :[R]\t34.98e\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";

登录后复制

在这个示例中，商品名称、价格和尺寸都是直接写入字符串的。当商品列表发生变化时，开发者需要手动修改这段代码，这显然不符合动态业务的需求，也极大地增加了维护成本。

动态生成商品列表的解决方案

解决动态内容打印的核心思路是：将数据与打印格式分离，通过程序逻辑根据数据动态构建 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）可以极大地简化字符串拼接过程，使其更具可读性。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

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

items.forEach((item) => {
  // 为每个商品拼接其ESC/POS格式的行
  itemList +=
    `[L]<b>${item.name}</b>[R]\t${item.price}e\n` +
    `[L]  + Size : ${item.size}\n` +
    `[L]\n`; // 每项商品后留一行空行
});

登录后复制

在上述代码中：

[L] 表示左对齐，[R] 表示右对齐。
<b> 和 </b> 可能用于粗体显示，这取决于具体的 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]<b>${item.name}</b>[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]<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${totalPrice}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 命令兼容性： 不同的打印机型号或 ESC/POS 库可能对某些命令的解析有所差异。例如，本例中使用的 <font size='big'> 或 <b> 标签，可能需要特定的库（如 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 格式的打印字符串。这种方法不仅提高了代码的灵活性和可维护性，也使得应用能够更好地适应多变的业务需求。开发者可以基于此基础，进一步扩展，实现更复杂的收据布局、多语言支持以及与后端数据的无缝集成。

以上就是React Native 热敏打印实践：利用 ESC/POS 命令构建动态收据的详细内容，更多请关注php中文网其它相关文章！