BARCODE GENERATOR

Barcode Generator

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<style>
* {
  box-sizing: border-box;
}

box {
  background:#f4f4f4;
  height:100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.barcode-container {
  font-family: "Roboto", sans-serif;
  background: #fff;
  padding:3px;
  
  border-radius:10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1000px;
  height: 424px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.barcode-input {
  border-radius:10px;
  padding:12px 24px;
  margin:10px;
  width:100%;
  font-size:16px;
  
}

.generate-btn {
  padding:12px 24px;
  font-size:16px;
  cursor:pointer;
  background: red;
  color: #fff;
  border: none;
  border-radius:10px;
}

.generate-btn:hover {
  background: #de0606;
}
.download-btn {
  padding:12px 24px;
  font-size:16px;
  cursor:pointer;
  background: red;
  color: #fff;
  border: none;
  border-radius: 10px;
}

.download-btn:hover {
  background: #de0606;
}
.barcode {
    margin-top:2px;
    width:100%;
    height:300px;
}  
</style>
<div class="barcode-container">
<input class="barcode-input" type="text" />
<button class="generate-btn">Generate Barcode</button>
    <button class="download-btn" style="display: none;">Download Barcode</button>
  <svg class="barcode"></svg>
</div>
<script>
  const generateBtn = document.querySelector(".generate-btn");
  const downloadBtn = document.querySelector(".download-btn");
  const barcodeElement = document.querySelector(".barcode");

  const generateBarcode = () => {
    const input = document.querySelector(".barcode-input").value;
    if (input.trim() !== "") {
      JsBarcode(barcodeElement, input, {
        height: 100,
        displayValue: true,
      });
      downloadBtn.style.display = 'inline-block'; // Show download button
    } else {
      alert("Please enter a valid text or number to generate a barcode.");
    }
  };

  const downloadBarcode = () => {
    const svg = barcodeElement;
    const url = svgToImageURL(svg);
    const a = document.createElement("a");
    a.href = url;
    a.download = "barcode.png"; // Set the file name
    a.click();
  };

  const svgToImageURL = (svgElement) => {
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const svgBlob = new Blob([svgData], { type: "image/svg+xml" });
    const url = URL.createObjectURL(svgBlob);
    return url;
  };

  generateBtn.addEventListener("click", generateBarcode);
  downloadBtn.addEventListener("click", downloadBarcode);
</script>