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 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
- Google sheets | Number to text, Hàm đọc số thành chữ Ứng dụng taoh hóa đơn, phiếu chi.
- Googlesheet Apps script Webapp | Tạo mã QR Code từ nội dung nhập vào – QR Code Generator
- Google sheet apps script | Dropdown đơn giản lấy dữ liệu từ google sheet – Simple dropdown
- Apps script Webapp CSS – HTML – JS | Tạo ứng dụng Ghi chú trên nền tảng webapp – website
- Google sheet Apps script | Hàm setTimeout định thời gian xóa các trường Input khi click Button
- Apps script Webapp | Sử dụng CSS tạo hiệu ứng sóng nước – Trang trí đẹp mắt cho web và blog.
- Google sheet Apps script Tiện ích tạo mã vạch (barcode) trên webapp
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>