前端条形码bwip.js的使用精简说明

最新推荐文章于 2023-11-04 10:55:56 发布

木子旭

最新推荐文章于 2023-11-04 10:55:56 发布

阅读量1.5k

点赞数 1

分类专栏： # javascript 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_45895576/article/details/122882789

版权

javascript 专栏收录该内容

160 篇文章 0 订阅

订阅专栏

1. 引入包

https://www.bootcdn.cn/bwip-js/
可以直接引入这个网址，也可以下载下来本地引用

2.使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script
    type="text/javascript"
    src="https://cdn.bootcdn.net/ajax/libs/bwip-js/3.0.4/bwip-js-min.js"
  ></script>
 
  <body>
      <canvas id="canvas"></canvas>
      <div id="output"></div>
  </body>
  <script>
    let options = "includetext parsefnc";
    let aopts = options.split(" ");
    let opts = {};
    for (let i = 0; i < aopts.length; i++) {
      if (!aopts[i]) {
        continue;
      }
      var eq = aopts[i].indexOf("=");
      if (eq == -1) {
        opts[aopts[i]] = true;
      } else {
        opts[aopts[i].substr(0, eq)] = aopts[i].substr(eq + 1);
      }
    }

    opts.text = "2022021101";
    opts.bcid = "code128";
    opts.scaleX = 2;
    opts.scaleY = 1;
    opts.textxalign = "center";

    var div = document.getElementById("output");
    if (div) div.innerHTML = "";
    try {
      // The return value is the canvas element
      let canvas = bwipjs.toCanvas("canvas", opts);
    } catch (e) {
      var s = "";
      if (e.fileName) s += e.fileName + " ";
      if (e.lineNumber) s += "[line " + e.lineNumber + "] ";
      alert(s + (s ? ": " : "") + e.message);
    }
  </script>
</html>