반응형
jquery로 바코드 생성하는 방법
1. 플러그인
https://barcode-coder.com/en/barcode-jquery-plugin-201.html
위 링크 접속 후 다운로드
아래 스크립트 추가
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
2. 예제
$("#bcTarget1").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});
$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});
$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:100, showHRI:false});
$("#bcTarget4").barcode("1234567890", "code128",{barWidth:3, barHeight:50, bgColor:"#FFFF00", color:"#0000FF"});
$("#bcTarget5").barcode("1234567890", "datamatrix",{barWidth:1, barHeight:50 , bgColor:"red", color:"black", showHRI:true});
3. 참고 및 전체 소스
Barcode-Coder: BARCODE EAN 8, EAN 13, CODE 128, .. ONLINE BARCODE GENERATOR, SOURCE CODE, CHECKSUM CALCULATION...
Barcode coder : Everything for the barcode This site is for developers. Its objective is to combine a maximum of resources relating to barcode: detailed explanations Online barcode generator Source code ... The BCC library is a open-source library for barc
barcode-coder.com
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
<script>
$(document).ready(function() {
$("#bcTarget1").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});
$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});
$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:100, showHRI:false});
$("#bcTarget4").barcode("1234567890", "code128",{barWidth:3, barHeight:50, bgColor:"#FFFF00", color:"#0000FF"});
$("#bcTarget5").barcode("1234567890", "datamatrix",{barWidth:1, barHeight:50 , bgColor:"red", color:"black", showHRI:true});
});
</script>
</head>
<body>
bcTarget1
<div id="bcTarget1"></div>
<br/>
bcTarget2
<div id="bcTarget2"></div>
<br/>
bcTarget3
<div id="bcTarget3"></div>
<br/>
bcTarget4
<div id="bcTarget4"></div>
<br/>
bcTarget5
<div id="bcTarget5"></div>
</body>
</html>반응형
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML] 위 첨자, 아래 첨자 (<sup>, <sub> 태그) (0) | 2021.09.16 |
|---|---|
| [CSS] CSS Diner - CSS Selector 연습하기 (Level 16 ~ Level 32) (0) | 2021.06.30 |
| [CSS] CSS Diner - CSS Selector 연습하기 (Level 1 ~ Level 15) (0) | 2021.06.30 |
| [CSS] Flexbox Froggy - CSS Flexbox Layout 배우기 게임 (1) | 2021.06.30 |
| [CSS] Flexbox Defense - CSS Flexbox Layout 배우기 게임 (0) | 2021.06.30 |
댓글