투케이2K

543. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 JsBarcode 라이브러리 사용해 Barcode 바코드 표시 팝업창 생성 수행 본문

JavaScript

543. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 JsBarcode 라이브러리 사용해 Barcode 바코드 표시 팝업창 생성 수행

투케이2K 2026. 6. 1. 19:01
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / sweetAlert / JsBarcode 


- 사전) 👉 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" translate="no">
<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">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

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

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

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>






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

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          
          // -----------------------------------------
          // ✅ SweetAlert 팝업 생성          
          // -----------------------------------------
          swal({
            title: "바코드 (Barcode)",
            content: {
              element: "div",   // ✅ svg 직접 사용 금지
              attributes: {
                id: "barcode",
                style: `
                  display:flex;
                  justify-content:center;
                  align-items:center;

                  margin:0 auto; /* ✅ 가로 중앙 */
                `
              }
            },
            button: "닫기"
          });


          // -----------------------------------------
          // ✅ 렌더 이후 실행          
          // -----------------------------------------

          setTimeout(() => {

            const container = document.getElementById("barcode");
            if (!container) return;

            container.innerHTML = "";

            // ✅ 핵심: SVG는 반드시 namespace 로 생성
            // ✅ SVG는 HTML이 아니라 “XML(SVG namespace)” 기반이라서 일반 createElement()가 아니라 createElementNS()로 생성해야 한다
            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

            svg.setAttribute("width", "100%");
            svg.setAttribute("height", "100%");

            container.appendChild(svg);

            JsBarcode(svg, "ORDER-20240601-0001", {
              format: "CODE128", // 바코드 종류
              width: 2, // 바(bar) 두께
              height: 140, // 바코드 높이
              displayValue: true, // 하단 텍스트 표시 여부
              fontSize: 14, // 텍스트 크기
              margin: 5, // 전체 여백
              lineColor: "#000", // 바 색상
              background: "#fff" // 배경색
            });

            console.log("✅ 바코드 생성 완료");

          }, 200);


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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 - prompt , text , number , password]

https://kkh0977.tistory.com/8788

https://blog.naver.com/kkh0977/224267047454


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 팝업창 활성 시 확인 및 취소 버튼 외 동적 버튼 추가 생성 , 팝업창 자동 닫힘 방지 수행]

https://kkh0977.tistory.com/8784

https://blog.naver.com/kkh0977/224261592220


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 메뉴 리스트 표시 및 메뉴 선택 팝업창 생성 수행 - radio list alert]

https://kkh0977.tistory.com/8783

https://blog.naver.com/kkh0977/224261583820


▶️ [자바스크립트 JsBarcode 라이브러리 사용해 커스텀 옵션 지정 바코드 Barcode 생성 수행]

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

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

[결과 출력]

​

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

'JavaScript' 카테고리의 다른 글

545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소 비율 값 확인 및 변경 수행  (0) 2026.06.02
544. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 zxing 라이브러리 사용해 QR 및 바코드 스캔 카메라 팝업창 생성 수행  (0) 2026.06.02
542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행  (0) 2026.05.29
541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정  (0) 2026.05.28
540. (javaScript) [간단 소스] 자바스크립트 Proxy 사용해 콘솔 로그 출력 막기 수행 - console log, debug, info, warn, error  (0) 2026.05.28
'JavaScript' Related Articles more
Comments