在前端开发中，使用条形码是非常常见的需求，可以用于商品管理、仓库管理等场景中。npm 上有一个可以生成条形码的库——barcode-from-binary，下面将给大家介绍它的使用方法。
安装
可以使用 npm 进行安装：
npm install barcode-from-binary --save
生成条形码
使用 barcode-from-binary 的核心方法是 createBarcode，它接受两个参数：
binaryString：二进制字符串，即条形码的编码options：可选项，用于设置生成的条形码的外观
import { createBarcode } from 'barcode-from-binary';
const binaryString = '11010011100'; // 条形码编码
const barcode = createBarcode(binaryString, { width: 360, height: 80 });
document.body.appendChild(barcode);其中，width 是条形码的宽度，height 是条形码的高度。如果不设定这些值，则默认生成的条形码尺寸为 200 x 100。
生成带文本的条形码
使用 createBarcode 生成的条形码只有条形码本身，但是在实际的应用场景中，通常需要将条形码和商品名称、条码编号等相关信息一起展示。可以通过在 HTML 中添加文本和 CSS 进行排版来实现。下面是一个例子：
-- -------------------- ---- -------
-----
---- ----------- ------------
---
----- ----- ----- ----------- ----------- ----------- --
-- ----------------------- -----
----- ---------------------------------------------------------
-------- -----
-------
----- ----- ------ ---------------------------------------------------------
-------- -------
-------
----
-- ------------------------ -----
----- ----------- ---------------- ---- - - - - - - - -- - - -- -- --
----- ----------- ---------------- ---- -- - - -- - - -- -- - -- -- -- --
----- ----- ----- ---------- ----------- ----------- ---------------- --
----- ------ ----- ---------- ----------- ----------- ---------------- --
----
----
------
------可以看到，在 svg 中，首先添加了一个 <rect> 来作为背景，并把条形码和文本分别放在了两个 <g> 中。最后，使用 path 和 rect 标签来绘制了条形码的形状。
总结
通过本文的介绍，可以学会如何在前端中使用 npm 包 barcode-from-binary 来生成条形码，并且了解了如何在生成的条形码中添加文本信息。在实际应用中，可以根据场景的不同，灵活使用该库来满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605a81e8991b448de7ee