JS生成一维码(条形码)功能示例

2023年5月19日下午6:13 • JavaScript

下面是关于“JS生成一维码(条形码)功能示例”的完整攻略:

步骤一：导包

在JS中，我们可以使用第三方库JSBarcode来生成一维码(条形码)。因此，在使用该功能之前，首先要导入JSBarcode库。

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

步骤二：创建画布

接下来，我们需要在网页中创建一个Canvas画布。JSBarcode库会将生成的一维码(条形码)绘制在该画布上。

<canvas id="barcode"></canvas>

步骤三：生成一维码(条形码)

现在，我们已经导入JSBarcode库，创建了画布。接下来，我们就可以使用JSBarcode库生成一维码(条形码)了。

JsBarcode("#barcode", "1234567890", {
  format: "upc",
  displayValue: true,
  fontSize: 20,
  margin: 10
});

上述代码的含义是：

#barcode：指Canvas画布的id。
"1234567890"：指要生成的一维码(条形码)的内容。
format: "upc"：指生成的一维码(条形码)的格式。
displayValue: true：指是否显示一维码(条形码)的内容。
fontSize: 20：指显示一维码(条形码)内容的字体大小。
margin: 10：指一维码(条形码)的外边距。

示例一：生成简单的一维码(条形码)

我们首先来看一个简单的示例，生成一个简单的一维码(条形码)，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS生成一维码(条形码)功能示例</title>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
</head>
<body>
  <canvas id="barcode"></canvas>
  <script>
    JsBarcode("#barcode", 1234567890, {
      format: "upc",
      displayValue: true,
      fontSize: 20,
      margin: 10
    });
  </script>
</body>
</html>

运行上面的代码，我们可以看到在Canvas画布上生成了一个包含1234567890内容的一维码(条形码)。

示例二：生成多种格式的一维码(条形码)

JSBarcode库支持多种格式的一维码(条形码)，例如UPC、EAN、CODE128等。我们可以根据需要选择不同的格式，生成不同类型的一维码(条形码)。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS生成一维码(条形码)功能示例</title>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
</head>
<body>
  <canvas id="barcode1"></canvas>
  <canvas id="barcode2"></canvas>
  <canvas id="barcode3"></canvas>
  <script>
    // UPC格式的一维码(条形码)
    JsBarcode("#barcode1", "1234567890", {
      format: "upc",
      displayValue: true,
      fontSize: 16,
      margin: 10
    });

    // EAN13格式的一维码(条形码)
    JsBarcode("#barcode2", "5901234123457", {
      format: "ean13",
      displayValue: true,
      fontSize: 16,
      margin: 10
    });

    // CODE128格式的一维码(条形码)
    JsBarcode("#barcode3", "ÄBCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-./:;?@[£]_{}", {
      format: "code128",
      displayValue: true,
      fontSize: 16,
      margin: 10
    });
  </script>
</body>
</html>

运行上面的代码，我们可以看到在Canvas画布上生成了三种不同格式的一维码(条形码)。第一个是UPC格式的，第二个是EAN13格式的，第三个是CODE128格式的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS生成一维码(条形码)功能示例 - Python技术站