Google sheet Apps script Tiện ích tạo mã vạch (barcode) trên webapp

20/09/2024 giaoanppt

Giaoan.link chia sẻ đến các bạn cách sử dụng Google sheet Apps script Tiện ích tạo mã vạch (barcode) trên webapp. Ở dây, chúng tả chỉ sử dụng appscript để tạo một trang web trên đó có khung để điền nội dung và một button click tạo mã vạch cho nội dung đó. Bạn có thể xem video hướng dẫn bên yotube, mã code của project ở bên dưới.

Bạn truy cập ở đây để tìm thêm nhiều project excel, google sheet, apps script

Các project hiển thị ngẫu nhiên:

TRUY CẬP LINK VIDEO YOUTUBE HƯỚNG DẪN

Mã apps script trên “Code.gs”

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Mã apps script trên “index.html”

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tạo mã vạch trực tuyến</title>    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
    </script>
    <?!= include('css'); ?>
  </head>
  <body onload = "autoClick();">
    <div class="barcode-container">
      <h2 style="color: blue">TẠO MÃ VẠCH - BARCODE</h2>
      <input type="text" placeholder="Ghõ nội dung cần mã hóa barcode" class="barcode-input"/>
      <button class="generate-btn">TẠO MÃ VẠCH</button>      
      <svg  class="barcode"></svg>             
      
    </div>

  <div class="text-center"><a href="https://www.youtube.com/@Netmediacctv" target="_blank"><i style="color:red" class="bi-youtube"></i></a>&nbsp;<a href="https://www.facebook.com/giaoanppt" target="_blank"><i class="bi-facebook"></i></a></div><center style="font-size:12px;"><a style="color:gray;text-decoration:none" href="https://giaoan.link" target="_blank"> Giaoan.link<a/> &copy; 2024 Landing page</center></div>


    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"
      integrity="sha512-k2wo/BkbloaRU7gc/RkCekHr4IOVe10kYxJ/Q8dRPl7u3YshAQmg3WfZtIcseEk+nGBdK03fHBeLgXTxRmWCLQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <?!= include('javascript'); ?>  
  </body>
</html>

Mã apps script trên “css.html”

<style>
* {
  box-sizing: border-box;
}

body {
  background: #f4f4f4;
  margin: 0;
  display: grid;
  place-items: center;
}

.barcode-container {
  font-family: "Roboto", sans-serif;
  background: #fff;
  padding: 32px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 900px;
  height: 424px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.barcode-container h2 {
  font-size: 32px;
  margin-bottom: 8px;
}

.barcode-input {
  padding: 12px 24px;
  margin: 10px;
  width: 100%;
  font-size: 16px;
}

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

.generate-btn:hover {
  background: #de0606;
}

.barcode {
  margin-top: 20px;
  max-width: 100%;
  display: block;
}
</style>

Mã apps script trên “javascript.html”

<script>
    const generateBtn = document.querySelector(".generate-btn");
    const generateBarcode = () => {
      const input = document.querySelector(".barcode-input").value;
      if (input.trim() !== "") {
        JsBarcode(".barcode", input, {
          height: 100,
          displayValue: true,
        });
      } else {
        alert("Vui lòng điền nội dung cần tạo mã vạch - Barcode!");
      }
    };

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