👌

javascriptとbootstrapで簡単バーコード生成

2024/07/25に公開

Bootstrap

需要があるか微妙ですがバーコードコード生成アプリを作りました。

フォーマットがCODE128なので数値以外のアルファベットもいけます。なので、在庫管理などの業務用のバーコードなんかに使えるかもしれません、わかんないですが。。。

動作も軽量です。
SVG、PNG、GIFでそれぞれダウンロード可能になっています。

作成

Barcode.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>バーコード生成とダウンロード</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
    <style>
        #barcode-container {
            position: relative;
            height: 100px; /* Adjust height as needed */
        }
        #barcode-placeholder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2rem;
            color: #6c757d;
        }
    </style>
    </head>
    <body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-6 mx-auto text-center">
                <h3 class="mb-4">バーコード生成とダウンロード</h3>
				<h5 class="mb-4">フォーマット：CODE128</h5>
                <div class="d-md-flex mb-3">
                    <div class="col-md-9 mb-2 pe-md-2">
                        <input type="text" id="barcodeInput" class="form-control me-2" placeholder="バーコードデータを入力" oninput="checkInput()">
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="w-100 btn btn-primary" onclick="generateBarcode()">バーコードを生成</button>
                    </div>
                </div>
                <div id="barcode-container" class="bg-light p-3 mb-3 text-center">
                    <div id="barcode-placeholder">ここに表示されます</div>
                    <svg id="barcode"></svg>
                </div>
                <div class="d-flex flex-md-row flex-column justify-content-center">
    <button class="col-md-auto col-12 btn btn-success mb-3 me-md-3" onclick="downloadSVG()" id="svgBtn" disabled>SVGでダウンロード</button>
    <button class="col-md-auto col-12 btn btn-warning mb-3 me-md-3" onclick="downloadPNG()" id="pngBtn" disabled>PNGでダウンロード</button>
    <button class="col-md-auto col-12 btn btn-danger mb-3" onclick="downloadGIF()" id="gifBtn" disabled>GIFでダウンロード</button>
            </div>

            </div>
        </div>
    </div>
    <script>
        let barcodeGenerated = false;

        function generateBarcode() {
            const inputValue = document.getElementById('barcodeInput').value.trim();
            if (inputValue === '') return;

            // Clear previous barcode if any
            JsBarcode("#barcode", inputValue, {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: true,
            });

            // Set barcodeGenerated to true and update button states
            barcodeGenerated = true;
            document.getElementById('barcode-placeholder').style.display = 'none';
            document.getElementById('svgBtn').disabled = false;
            document.getElementById('pngBtn').disabled = false;
            document.getElementById('gifBtn').disabled = false;
        }

        function checkInput() {
            const inputValue = document.getElementById('barcodeInput').value.trim();
            if (!barcodeGenerated && inputValue === '') {
                document.getElementById('barcode-placeholder').style.display = 'block';
                document.getElementById('svgBtn').disabled = true;
                document.getElementById('pngBtn').disabled = true;
                document.getElementById('gifBtn').disabled = true;
            }
        }

        function downloadSVG() {
            const svgElement = document.getElementById('barcode');
            const svgData = new XMLSerializer().serializeToString(svgElement);
            const blob = new Blob([svgData], {type: 'image/svg+xml'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'barcode.svg';
            a.click();
            URL.revokeObjectURL(url);
        }

        function downloadPNG() {
            const svgElement = document.getElementById('barcode');
            const svgData = new XMLSerializer().serializeToString(svgElement);
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                const pngData = canvas.toDataURL('image/png');
                const a = document.createElement('a');
                a.href = pngData;
                a.download = 'barcode.png';
                a.click();
            };
            img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
        }

        function downloadGIF() {
            const svgElement = document.getElementById('barcode');
            const svgData = new XMLSerializer().serializeToString(svgElement);
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                const gifData = canvas.toDataURL('image/gif');
                const a = document.createElement('a');
                a.href = gifData;
                a.download = 'barcode.gif';
                a.click();
            };
            img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
        }
    </script>
    </body>
    </html>

あとは発行されたバーコードとDBなどで連携してごにょごにょしてください。

ちなみにQRコード生成は下記より。興味があれば覗いてあげてください。

以上ー

作成

Discussion