Google sheet Apps script Tiện ích tạo mã vạch (barcode) trên webapp
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:
- Appscript Webapp | Kéo thả các Items theo 2 chiều Dọc – Ngang, Ứng dụng sắp xếp chu trình công việc
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
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> <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/> © 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>