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:
- Tạo webapp import và update dữ liệu từ Excel lên Google sheet có Load bảng Table lên nền tảng web
- Google sheet, appscript và webapp – Giải pháp thu hoạc phí toàn diện
- Quản Lý Học Phí Bằng Google Apps Script: Form CRUD, Tìm Kiếm, In Phiếu Thu và Tự Động Tính Toán
- Giảm dung lượng PDF dễ dàng với PDF24 Creator – Miễn phí và hiệu quả
- Chuyển đổi Pdf dạng bản scan sang MS Excel chuẩn không bị lỗi font và giữ nguyên định dạng
- Chuyển định dạng file pdf dạng scan – dạng chụp hình ảnh sang MS Word định dạng chuẩn 99.9%
- Phím tắt vào BIOS và Boot Options của các hãng máy tính phổ biến
- Google sheet webapp | Form đăng ký Tự động gửi ID và QR code Check in qua địa chỉ mail
- Cách tắt Windows update và Windows Defender cực đơn giản
- Apsscript Radio Button và Input – Sự phụ thuộc của input vào Radio button
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>