使用javascript生成条形码

疼痛是不能见人的

引入

注意要引入在页面底部

1
<script src="JsBarcode.all.min.js"></script>

创建标签

1
<svg id="barcode"></svg>

生成

1
JsBarcode("#barcode", "Hi world!");

简单配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Option  	         Default value   	        Type
format "auto" (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
fontOptions "" String
font "monospace" String
textAlign "center" String
textPosition "bottom" String
textMargin 2 Number
fontSize 20 Number
background "#ffffff" String (CSS color)
lineColor "#000000" String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
valid function(valid){} Function

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
@foreach($qrcodes as $qrcode)
<svg class="barcode"
jsbarcode-format="code128"
jsbarcode-value="{{ $qrcode[1] }}"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
@endforeach
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script>
JsBarcode(".barcode").init();
</script>
</body>
</html>

http://lindell.me/JsBarcode/