index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"></script>
<style>
main {
display: flex;
justify-content: center;
align-items: center;
}
#reader {
width: 600px;
padding:15px;
}
#result {
text-align: center;
font-size: 1.5rem;
padding:15px;
}
button{
padding: 15px !important;
margin: 15px auto !important;
}
a{
padding: 15px !important;
margin: 15px auto !important;
}
</style>
<main>
<div id="reader"></div>
<div id="result"></div>
</main>
<div id="data-teble-results"></div>
<script>
const scanner = new Html5QrcodeScanner('reader', {
qrbox: {
width: 250,
height: 250,
},
fps: 20,
});
scanner.render(success, error);
function success(result) {
const data = result
document.getElementById('result').innerHTML = `
<h2>Success!</h2>
<p><a href="${result}">${result}</a></p>`
scanner.clear();
document.getElementById('reader').remove();
if(result){
google.script.run.withSuccessHandler((displayData)=>{
if (displayData != null) {
// Display data in a table
const tableHtml = `<table class='table table-bordered' width=100%>
<thead>
<tr>
<th>Name</th>
<th>DataD</th>
<th>DataE</th>
<th>DataF</th>
<th>DataH</th>
</tr>
</thead>
<tbody>
<tr>
<td>${displayData.name}</td>
<td>${displayData.dataD}</td>
<td>${displayData.dataE}</td>
<td>${displayData.dataF }</td>
<td>${displayData.dataH }</td>
</tr>
</tbody>
</table>`
document.querySelector('#data-teble-results').innerHTML = tableHtml
}else{
document.querySelector('#data-teble-results').innerHTML = "Data not found!"
}
}).sendback(result);
}
}
function error(err) {
console.error(err);
}
</script>
</body>
</html>
code.gs
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('My Project')
.setFaviconUrl('https://semicon.github.io/img/logo2.png')
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
function sendback(data) {
const qrCode = data
const values = sheet.getDataRange().getValues()
let responseData = {}
const item = values.findIndex(r => {return r[0] == qrCode})
if(~item) {
responseData = {
name: values[item][1], // Assuming name is in column B
dataC: values[item][2], // Assuming dataD is in column C
dataD: values[item][3], // Assuming dataF is in column D
dataE: values[item][4], // Assuming dataG is in column E
dataF: values[item][5], // Assuming dataG is in column F
dataG: values[item][6], // Assuming dataG is in column G
dataH: values[item][7] // Assuming dataG is in column H
}
return responseData;
}else{
return null;
}
}
https://guruchian.blogspot.com/2024/01/web-app-search-by-barcodes-or-qr-code.html
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}