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
Giaoan.link chia sẻ đến các bạn một project về “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“. Với project này bạn dễ dàng thay đổi nội dung của mã QR code đặt trên website hay blog của bạn. QR code là dạng mã sinh ra động, chứ không phải là một hình ảnh mà mình upload chèn vào website. Bên dưới là link video hướng dẫn minh họa và code apps script để bạn thực hiện.
Bạn tìm kiếm thêm nhiều project google sheet, apps script tại đây.
Project ngẫu nhiên:
- Web App Script CSS JS | Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link
- Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web
- Web App Script Webapp | Hiệu ứng hoa rơi – Form nhập liệu Gửi nội dung đến email
- Web App Script | Thanh trạng thái Status bar – Giá trị thể hiện theo điểm và label.
- 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
Mã Apps script trang “Code.gs”
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getQRCodes() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1'); // Thay 'Sheet1' bằng tên sheet của bạn
var data = sheet.getRange("A1").getValues(); // Lấy dữ liệu từ cột A
var qrCodes = data.map(function(row) {
var url = "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" + data;
return url;
});
return qrCodes;
}
Mã apps script trang “Index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.container{
width: 500px;
text-align: center;
padding: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
border-radius: 10px;
}
.title{
background-color: yellow;
font-size: 1.5em;
font-weight: bold;
padding: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">QR CODE TỰ ĐỘNG CẬP NHẬT</div>
<div class="box-qr" id="qrCodes"></div>
</div>
<script>
function displayQRCodes(qrCodes) {
var container = document.getElementById('qrCodes');
qrCodes.forEach(function(url) {
var img = document.createElement('img');
img.src = url;
container.appendChild(img);
});
}
google.script.run.withSuccessHandler(displayQRCodes).getQRCodes();
</script>
</body>
</html>