ID Library PdfService เครดิต อ.ดรัณภพ : 1iePjnglUzelAuJJb-QykRcUUWYBSKiNGUWVljnNe03G9zWzSUGIRWLXa
Code.gs
index.html
/**Dev https://examblog64.krooluang.com/ */
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function findRecord(record){
var ss = SpreadsheetApp.getActive().getSheetByName("xxx");
var data = ss.getDataRange().getValues()
var id = data.map(r => r[0])
var index = id.indexOf(record)
var output = {}
if(index > -1){
data = ss.getRange(index+1,1,1,ss.getLastColumn()).getValues()[0]
output.result = true
output.data = data
if(output.data[4]===""){
var pdfFolder = DriveApp.getFolderById('xxx')// ID FolderPDF
var templateFile = DriveApp.getFileById('xxx')// ID GoogleSlide
var sheetID = 'xxx'; // ID Sheet
var data = PdfService.initData(sheetID, 'xxx', index+1)
var option = {
linktype: "view",
pdfFolder: pdfFolder,
templateFile: templateFile,
data: data,
fileName: ['Name']
}
PdfService.createPDFFromSlide(option)
}
data = ss.getRange(index+1,1,1,ss.getLastColumn()).getValues()[0]
output.result = true
output.data = data
}else{
output.result = false
}
return output
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');
body {
font-family: 'Prompt', sans-serif;
font-size: .875rem;
background-color: #fafafa;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 mx-auto">
<section class="bg-secondary text-white p-3">
<div class="justify-content-between align-items-center">
<h5 class="mb-2 mb-md-0"><i class="fa-solid fa-circle-user"></i> Search</h5>
<form onsubmit="searchForm(this)">
<div class="input-group news-input my-2">
<input type="search" class="form-control" id="id" minlength="4" maxlength="4" placeholder="ID 4 characters.. Ex..1001-1009" />
<button class="btn btn-warning text-dark" id="find" type="submit"><i class="fa-solid fa-magnifying-glass"></i> Search</button>
<button class="btn btn-warning" id="find2" disabled style="display:none">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
</button>
</div>
<b style="color:yellow; font-size: 16px;" id="message"></b>
</form>
</div>
</section>
<table id="tb" class="table table-striped bg-light" widht="100%"></table>
<!--***//== If you continue to make clips You should give credit กรุณาให้เครดิตผู้พัฒนา==// ***-->
<footer class="text-muted text-center">
<p style="font-size:12px;"><a style="color:black" href="https://examblog64.krooluang.com/" target="_blank">Credit</a> © 2022
<a style="color:gray" href="https://examblog64.krooluang.com/" target="_blank">Dev Examblog</a>
</p>
</footer>
<!-- //============================================================// -->
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
</body>
</html><script>
function searchForm(record){
event.preventDefault()
document.getElementById('find2').style.display='block';
document.getElementById('find').style.display='none';
if(document.getElementById('id').value == "" ){
document.getElementById("message").innerHTML = "Enter student code !";
setTimeout(function(){
document.getElementById('message').innerHTML= ""; }, 1500);
document.getElementById('tb').innerHTML= "";
document.getElementById('find').style.display='block';
document.getElementById('find2').style.display='none';
}else{
var record = document.getElementById('id').value
google.script.run.withSuccessHandler(findSuccess).findRecord(record)
}
}
function findSuccess(output){
if(output.result == true){
document.getElementById('id').value = ''
document.getElementById('find').style.display='block';
document.getElementById('find2').style.display='none';
var idview = output.data[4].split("/view")
var preview = idview[0]+"/preview"
var div = document.createElement('div')
div.setAttribute('id','tb2')
document.body.appendChild(div)
document.getElementById('tb').innerHTML =
`<tr>
<td colspan="2"><iframe src="${preview}" class="x1" style="width:100%;height:320px" allow="autoplay"></iframe></td>
</tr>`
}else{
document.getElementById('find').style.display='block';
document.getElementById('find2').style.display='none';
document.getElementById("message").innerHTML = "Data not found !";
setTimeout(function(){
document.getElementById('message').innerHTML= ""; }, 1500);
document.getElementById('tb').innerHTML= "";
}
}
</script>