前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年11月07日

「前端·开发工具分享·建议收藏」JavaScript 生成条形码

本文介绍原生的 ① JS 生成条形码 和 ② 依赖第三方 JS（JsBarcode）处理前端生成 条形码的需求，注意：前端生成 条形码 的性能值得考虑哦。

一、基础版

（1）核心功能

  1. 生成条形码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成条形码</title>
		<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
		<style>
			.barcode {
				margin-top: 20px;
				text-align: center
			}

			.barcode+* {
				clear: both
			}

			#barcode {
				white-space: nowrap;
				zoom: .5;
				/* -webkit-transform: scaleX( .5); transform: scaleX(.5);*/
			}

			#barcode div {
				display: inline-block;
				height: 120px
			}

			.barcode .bar1 {
				border-left: 2px solid black
			}

			.barcode .bar2 {
				border-left: 4px solid black
			}

			.barcode .bar3 {
				border-left: 6px solid black
			}

			.barcode .bar4 {
				border-left: 8px solid black
			}

			.barcode .space0 {
				margin-right: 0
			}

			.barcode .space1 {
				margin-right: 2px
			}

			.barcode .space2 {
				margin-right: 4px
			}

			.barcode .space3 {
				margin-right: 6px
			}

			.barcode .space4 {
				margin-right: 8px
			}

			.barcode label {
				clear: both;
				display: block;
				text-align: center;
				font: 16px/34px helvetica
			}
		</style>
	</head>
	<body>
		<div class="barcode code-box">
			<div id="barcode"></div>
		</div>
		<script>
			// jQuery的写法，页面加载触发的事件
			// $(function() {
			// });
			
			window.onload = function(){
				createBarcode('barcode', 'HELLO', 'B')
			}
		</script>
	</body>

	<script type="text/javascript">
		/**
		 * @Description 生成条形码
		 * @Auther songsir
		 * @Date 2018/11/26
		 */
		/*****************************************************************start*****************************************************/
		(function() {
			if (!exports) var exports = window;
			var BARS = [212222, 222122, 222221, 121223, 121322, 131222, 122213, 122312, 132212, 221213, 221312, 231212,
					112232, 122132, 122231, 113222, 123122, 123221, 223211, 221132, 221231, 213212, 223112, 312131,
					311222, 321122, 321221, 312212, 322112, 322211, 212123, 212321, 232121, 111323, 131123, 131321,
					112313, 132113, 132311, 211313, 231113, 231311, 112133, 112331, 132131, 113123, 113321, 133121,
					313121, 211331, 231131, 213113, 213311, 213131, 311123, 311321, 331121, 312113, 312311, 332111,
					314111, 221411, 431111, 111224, 111422, 121124, 121421, 141122, 141221, 112214, 112412, 122114,
					122411, 142112, 142211, 241211, 221114, 413111, 241112, 134111, 111242, 121142, 121241, 114212,
					124112, 124211, 411212, 421112, 421211, 212141, 214121, 412121, 111143, 111341, 131141, 114113,
					114311, 411113, 411311, 113141, 114131, 311141, 411131, 211412, 211214, 211232, 23311120
				],
				START_BASE = 38,
				STOP = 106;

			function code128(code, barcodeType) {
				if (arguments.length < 2)
					barcodeType = code128Detect(code);
				if (barcodeType == 'C' && code.length % 2 == 1)
					code = '0' + code;
				var a = parseBarcode(code, barcodeType);
				return bar2html(a.join('')) + '<label>' + code + '</label>';
			}

			function bar2html(s) {
				for (var pos = 0, sb = []; pos < s.length; pos += 2) {
					sb.push('<div class="bar' + s.charAt(pos) + ' space' + s.charAt(pos + 1) + '"></div>');
				}
				return sb.join('');
			}

			function code128Detect(code) {
				if (/^[0-9]+$/.test(code)) return 'C';
				if (/[a-z]/.test(code)) return 'B';
				return 'A';
			}

			function parseBarcode(barcode, barcodeType) {
				var bars = [];
				bars.add = function(nr) {
					var nrCode = BARS[nr];
					this.check = this.length == 0 ? nr : this.check + nr * this.length;
					this.push(nrCode || ("UNDEFINED: " + nr + "->" + nrCode));
				};
				bars.add(START_BASE + barcodeType.charCodeAt(0));
				for (var i = 0; i < barcode.length; i++) {
					var code = barcodeType == 'C' ? +barcode.substr(i++, 2) : barcode.charCodeAt(i);
					converted = fromType[barcodeType](code);
					if (isNaN(converted) || converted < 0 || converted > 106) throw new Error("Unrecognized character (" +
						code + ") at position " + i + " in code '" + barcode + "'.");
					bars.add(converted);
				}
				bars.push(BARS[bars.check % 103], BARS[STOP]);
				return bars;
			}
			var fromType = {
				A: function(charCode) {
					if (charCode >= 0 && charCode < 32) return charCode + 64;
					if (charCode >= 32 && charCode < 96) return charCode - 32;
					return charCode;
				},
				B: function(charCode) {
					if (charCode >= 32 && charCode < 128) return charCode - 32;
					return charCode;
				},
				C: function(charCode) {
					return charCode;
				}
			};
			//--| Export
			exports.code128 = code128;
		})();
		/**
		 * showDiv：代表需要显示的divID，
		 * textVlaue ： 代表需要生成的值，
		 * barcodeType：代表生成类型(A、B、C)三种类型
		 */
		function createBarcode(showDiv, textValue, barcodeType) {
			var divElement = document.getElementById(showDiv);
			divElement.innerHTML = code128(textValue, barcodeType);
		}
	</script>
</html>

（2）展示效果

二、升级版

（1）完整源码

前提：引入 jQuery 和 JsBarcode 插件。

官方下载对应的JS，或者直接引入 CDN资源，如下：

<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js" type="text/javascript" charset="utf-8"></script>

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条形码-案例</title>
		<!-- 引入外部 CDN 的 JsBarcode 插件 -->
		<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js" type="text/javascript"
			charset="utf-8"></script>
	</head>
	<body>
		<h5>code128</h5>
		<svg id="code128"></svg>
		
		<h5>ean-13</h5>
		<svg id="ean-13"></svg>
		<svg id="ean-8"></svg>
		<svg id="ean-5"></svg>
		<svg id="ean-2"></svg>
		
		<h5>upc-a</h5>
		<svg id="upc-a"></svg>
		
		<h5>code39</h5>
		<svg id="code39"></svg>
		
		<h5>itf-14</h5>
		<svg id="itf-14"></svg>
		
		<h5>msi</h5>
		<svg id="msi"></svg>
		
		<h5>pharmacode</h5>
		<svg id="pharmacode"></svg>

		<script type="text/javascript">
			JsBarcode("#code128", "Hi!", {
            	// textAlign: "left", // 字体向左靠齐
				// textPosition: "top",// 字体内容位置
				// fontOptions: "bold", // 字体加粗
				// font: "cursive", // 字体样式
				// fontSize: 20, // 字体大小
				// background: "#4b8b7f", // 背景颜色
                // displayValue: false, // 是否显示条形码内容
				// height: 50, // 每个条纹的最高指定高度
				// width: 6, // 每个条纹的最高指定宽度
				lineColor: "#ffffff",
            });
			JsBarcode("#ean-13", "1234567890128", {
				format: "ean13"
			});
			JsBarcode("#ean-8", "12345670", {
				format: "ean8"
			});
			JsBarcode("#ean-5", "12345", {
				format: "ean5"
			});
			JsBarcode("#ean-2", "12", {
				format: "ean2"
			});
			JsBarcode("#upc-a", "123456789012", {
				format: "upc"
			});
			JsBarcode("#code39", "Hello", {
				format: "code39"
			});
			JsBarcode("#itf-14", "1234567890123", {
				format: "itf14"
			});
			JsBarcode("#msi", "123456", {
				format: "msi"
			});
			JsBarcode("#pharmacode", "12345", {
				format: "pharmacode"
			});
		</script>
	</body>
</html>

（2）效果展示



附录

  1. JsBarcode 插件官方示例：GitHub - lindell/JsBarcode: Barcode generation library written in JavaScript that works in both the browser and on Node.js
  2. 支持条形码的类型：
// 支持的条形码种类
    CODE128
    CODE128 (automatic mode switching)
    CODE128 A/B/C (force mode)
    EAN
    EAN-13
    EAN-8
    EAN-5
    EAN-2
    UPC (A)
    UPC (E)
    CODE39
    ITF
    ITF
    ITF-14
    MSI
    MSI10
    MSI11
    MSI1010
    MSI1110
    Pharmacode
    Codabar

如果对你有所帮助，感谢 点赞 - 收藏 - 分享

标签：html文字加粗 

作者:whsf66 , 分类:前端教程 , 浏览:11 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言