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:
- Google sheet Apps script | Data Entry Form – Tự động đọc số tiền thành chữ ở trường input
- Google sheet Apps script | Cập nhật điểm lớp học – Theo danh sách lớp và Theo từng học sinh
- Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input
- Google sheet apps script | Chọn năm và kiểu biểu đồ để Load dữ liệu lên website
- Google sheet apps script | Scan QR code – Filter and get data table display on webapp
- Google sheet apps script Filter to get data to display on webapp, fill background color for data row
- Google sheet Apps script Webapp | Project Quản lý đơn hàng – Cập nhật sản phẩm – In phiếu kiểm soát
- Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi
- Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz
- Google sheet Apps script | Trang trắc nghiệm Quiz – Cập nhật câu hỏi, trả lời, thời gian đếm ngược
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>