HTML Apps script Lấy dữ liệu từ CELL Spreadsheet lên Browser
Trong ví dụ này chúng ta sẽ sử dụng một số kiến thức về html, google sheet, apps script để lấy dữ liệu từ Cell Spreadsheet và hiển thị giá trị đó lên trình duyệt web (Browser).
Các bài excel thực hành ứng dụng khác:
- 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ã trong file Code.gs
function doGet(e){
return HtmlService.createHtmlOutputFromFile("index.html");
}
function getDatacell() {
var sw=SpreadsheetApp.getActiveSpreadsheet();
var ss=sw.getActiveSheet();
let dataCell = ss.getRange("C3").getValue();
let display="<span>" +dataCell+ "</span>";
return display;
}Mã trong file index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Lấy dữ liệu từ Cell của Spreadsheet, hiển thị lên Browser</title>
</head>
<body >
<table align="center">
<tr>
<td style="color: blue; font-size:3em; font-weight:bold;">Tổng số lượng: </td>
<td style="text-align:c enter; color: red; font-size:3em; font-weight:bold;" id="result">ds</td>
</tr>
</table>
<script>
let loading = "Đang lấy dữ liệu...";
document.querySelector('#result').innerHTML=loading;
function onSuccess(response){
let result = "<span>"+response+"</span>";
document.querySelector('#result').innerHTML=result;
}
google.script.run.withSuccessHandler(onSuccess)
.getDatacell();
</script>
</body>
</html>