투케이2K

474. (javaScript) 자바스크립트 JsBarcode 라이브러리 사용해 커스텀 옵션 지정 바코드 Barcode 생성 수행 본문

JavaScript

474. (javaScript) 자바스크립트 JsBarcode 라이브러리 사용해 커스텀 옵션 지정 바코드 Barcode 생성 수행

투케이2K 2025. 12. 21. 15:05
728x90

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / JsBarcode / Barcode


- 사전) JsBarcode 라이브러리 간략 설명 : 

  >> JsBarcode 는 JavaScript 로 1D(막대형) 바코드를 생성하는 라이브러리입니다
        
  >> JsBarcode 는 브라우저에서 바로 사용 가능하며 <svg>, <canvas>, <img> 모두 지원합니다
        
  >> JsBarcode 는 상품 코드, 시리얼 번호, 디바이스 ID 등을 생성하기에 적합합니다
        
  >> JsBarcode 는 생성 가능 바코드 종류 예시 : 

    - CODE128 (가장 추천) : 영문, 숫자, 특수문자 모두 지원 , 길이 제한 거의 없음

    - EAN-13 : 13자리 숫자만 가능 , 유통 상품 표준 바코드

    - EAN-8 : 8자리 숫자 , 소형 상품용

    - UPC-A : 12자리 숫자 , 북미 지역 상품 코드

    - ITF (Interleaved 2 of 5) : 숫자 전용 , 물류/박스 바코드

    - MSI : 숫자 전용 , 창고 관리, 내부 시스템

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->    
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script>

        // --------------------------------------------------------------------------------------------------------------
        
        /*
        -----------------------------------------------------------
        https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js 설명 정리
        -----------------------------------------------------------
        1. JsBarcode 는 JavaScript 로 1D(막대형) 바코드를 생성하는 라이브러리입니다
        -----------------------------------------------------------
        2. JsBarcode 는 브라우저에서 바로 사용 가능하며 <svg>, <canvas>, <img> 모두 지원합니다
        -----------------------------------------------------------
        3. JsBarcode 는 상품 코드, 시리얼 번호, 디바이스 ID 등을 생성하기에 적합합니다
        -----------------------------------------------------------
        4. JsBarcode 는 생성 가능 바코드 종류 예시 : 

        - CODE128 (가장 추천) : 영문, 숫자, 특수문자 모두 지원 , 길이 제한 거의 없음

        - EAN-13 : 13자리 숫자만 가능 , 유통 상품 표준 바코드

        - EAN-8 : 8자리 숫자 , 소형 상품용

        - UPC-A : 12자리 숫자 , 북미 지역 상품 코드

        - ITF (Interleaved 2 of 5) : 숫자 전용 , 물류/박스 바코드

        - MSI : 숫자 전용 , 창고 관리, 내부 시스템
        -----------------------------------------------------------
        */ 

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
            console.log("[window onload] : [Start]");

            try {


                // -----------------------------------------
                // [barcode 객체 정의 및 데이터 지정]
                // -----------------------------------------
                const barcodeComponent = document.getElementById('barcode');

                const barcodeData = "helloTwok2k";


                // -----------------------------------------
                // ✅ [JsBarcode : 옵션 지정 바코드 생성]
                // -----------------------------------------                
                JsBarcode(barcodeComponent, barcodeData, {
                    format: "CODE128", // 바코드 종류
                    width: 2, // 바(bar) 두께
                    height: 100, // 바코드 높이
                    displayValue: true, // 하단 텍스트 표시 여부
                    fontSize: 14, // 텍스트 크기
                    textMargin: 10, // 바코드와 텍스트 간격
                    margin: 10, // 전체 여백
                    lineColor: "#000000", // 바 색상
                    background: "#ffffff" // 배경색
                });

            }
            catch (exception) {
              console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);
            }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

    <!-- ✅ Barcode Container : 지원 대상 <svg> / <canvas> / <img> -->
    <svg id="barcode"></svg>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[JsBarcode 라이브러리 사용 참고 사이트]

https://www.jsdelivr.com/package/npm/jsbarcode


[온라인 무료 QR , Barcode 생성 사이트 (큐알, 바코드)]

https://blog.naver.com/kkh0977/223298788071?trackingCode=blog_bloghome_searchlist


[유틸 파일] observableBarcodeImage : 바코드 ImageView 팝업창 호출 처리 메소드

https://blog.naver.com/kkh0977/223538746426?trackingCode=blog_bloghome_searchlist


[CIFilter 사용해 바코드 (code128) 이미지 생성 수행 - CICode128BarcodeGenerator]

https://blog.naver.com/kkh0977/223297675658?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 

[결과 출력]

​

 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

476. (javaScript) [간단 소스] 자바스크립트 안정적 아스키 문자 사용해 입력 된 길이 만큼 랜덤 문자열 생성 - Create Random String  (0) 2025.12.28
475. (javaScript) 자바스크립트 zxing browser , library 라이브러리 사용해 QR 및 Barcode 이미지 스캔 수행  (0) 2025.12.22
473. (javaScript) 자바스크립트 파일 다운로드 Get URL 주소에서 커스텀 파라미터 추가해 Long Url 생성 및 a 태그 파일 다운로드 수행  (0) 2025.12.19
472. (javaScript) 자바스크립트 AWS STS 임시 자격 증명 사용 및 Long 형식 S3 파일 다운로드 GetPreSignedUrl 프리 사인 URL 주소 생성  (0) 2025.12.17
471. (javaScript) 자바스크립트 qrcode.js 라이브러리 사용해 커스텀 옵션 지정 간단 QR 코드 생성 수행  (0) 2025.12.16
'JavaScript' Related Articles more
Comments