在 React 中用 Syncfusion 生成…

当需要在 React 应用中生成 Code39/Code128 等一维条码、QR 码或 Data Matrix，并定制样式或导出图片时使用。

适用场景

解决思路

1. 安装 @syncfusion/ej2-react-barcode-generator 依赖，并按 Vite/React 方式完成项目初始化与组件导入。
2. 根据用途选择生成器组件：一维条码用 BarcodeGeneratorComponent（Code39、Code39Extended、Code11、Code128、Code32、Code93、Codabar），二维码用 QRCodeGeneratorComponent，Data Matrix 用 DataMatrixGeneratorComponent。
3. 一维条码通过 type 属性指定类型（如 type="Code39"），并注意各类型的字符集、编码与校验和支持差异。
4. 二维码使用 QRCodeGeneratorComponent，版本 1-40 自动缩放，支持 numeric、alphanumeric、JIS8 等字符编码。
5. Data Matrix 使用 DataMatrixGeneratorComponent，注意其方形/矩形格式、编码规则与尺寸容量限制。
6. 通过 value 属性设置要编码的数据，通过 width、height（带 px 的字符串）设置尺寸。
7. 通过 foreColor 设置深色/条颜色，backgroundColor 设置浅色/空白颜色。
8. 通过 displayText 对象定制显示文本。
9. 为组件设置唯一的 id 属性（导出时必需）。
10. 动态值场景：用 React.useState 保存条码值并绑定到 value 属性实现动态生成。
11. 导出场景：用 React.useRef 引用组件，调用 ref.current.exportImage('barcode', 'PNG') 导出为 JPG/PNG 图片，或调用 exportAsBase64Image(format) 导出 base64 字符串。
12. 将条码组件放入带 padding、border 等样式的容器中实现响应式与美观布局。
13. 将条码生成集成到表单、报表、API 或打印/归档工作流中。
14. 按需查阅对应参考文档：getting-started、barcode-generator、qr-code-generator、data-matrix-generator、customization、export-and-integration。

适用边界 · 注意事项

• 不使用 Syncfusion 生态或不愿引入其商业库/付费授权的项目。
• 仅需纯前端轻量条码方案、不想依赖特定厂商组件库时。