JavaScript条形码生成插件 - 封装篇

最新推荐文章于 2023-06-28 16:38:43 发布

草巾冒小子

最新推荐文章于 2023-06-28 16:38:43 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/94363392

版权

JavaScript 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

很多事时候会用到手机扫描条形码收录或者查验信息的功能，那么，条形码是如何实现的呢？
今天，通过封装的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条形码生成插件 - 封装篇 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript条形码生成插件 - 封装篇

很多事时候会用到手机扫描条形码收录或者查验信息的功能，那么，条形码是如何实现的呢？今天，通过封装的js插件，完成这个问题。JavaScript条形码生成插件 - 封装篇j q 2 2 .c o m 网站：点击查看原demo演示地址demo代码实例：<!DOCTYPE html><html ><head><meta charset...
复制链接

扫一扫

专栏目录