很多事时候会用到手机扫描条形码收录或者查验信息的功能,那么,条形码是如何实现的呢?
今天,通过封装的js插件,完成这个问题。
JavaScript条形码生成插件 - 封装篇
j q 2 2 .c o m 网站: 点击查看原demo演示地址
demo代码实例:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js使用的条形码生成插件 | Js Barcode</title>
<script src='js/JsBarcode.all.min.js'></script>
</head>
<body>
<h1>V使用的条形码生成插件</h1>
<h2><b>注意:</b>此页面没有引入使用jquery.min.js文件!</h2>
<div class="heading">
<h1>Js Barcode</h1>
<h4>Playing around with JsBarcode, and Vue.js</h4>
</div>
<hr />
<div class="container" id="app">
<div class="form-group">
<svg id="barcode1"></svg>
</div>
<script>
JsBarcode("#barcode1", "Hi world!");
</script>
</div>
<hr />
<div class="container" id="app">
<div class="form-group">
<svg id="barcode"></svg>
</div>
<script>
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});
</script>
</div>
<hr/>
<div class="container" id="app">
<div class="form-group">
<svg class="barcode3"
jsbarcode-format="upc"
jsbarcode-value="123456789012"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</div>
<script>
JsBarcode(".barcode3").init();
</script>
</div>
</body>
</html>
相对应的js文件代码,下载地址如下:
以上就是关于“ JavaScript条形码生成插件 - 封装篇 ” 的全部内容。