การแสดงผล html ด้วย web app script

 
code.gs
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  // .setFaviconUrl('https://drive.google.com/file/d/1edLz97zRkTjqksjx7eo_SXQavnPctOOG/view')
  .setTitle('บันทึกการชำระเงินรายงวดที่ 1 สมาชิกสมาคมฌาปนกิจสงเคราะห์ โกเชน')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getData() {

   var Id = "1kC--------------------Lzv4Ow"; //แก้ 1
   var ss=SpreadsheetApp.openById(Id);
   var sheet = ss.getSheetByName("MakeLinksทั้งหมด");
   var range = sheet.getDataRange();
   var values = range.getDisplayValues();
       values.shift();
     Logger.log(values);
   return values;
}

 function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
     .getContent();
 }
*******************
index.html
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.3.3/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.3.3/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css" />

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
 
  <?!= include('css');?>
</head>

<body>
  <div class="container-fluid">
    <br>
  <div id="data"></div>
  </div>
    <?!= include('javaScript');?>
</body>

</html>
***********************
 javaScript.html
<script>
  window.onload = function () {
    google.script.run.withSuccessHandler(showData).getData();
  };

  function showData(data) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
      html += '<br>' + data[i].join('');
    }
    document.getElementById('data').innerHTML = html;
  }
</script>
**************** 
 css.html

<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300&display=swap');

</style>
 
 
 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น

สมัครสมาชิก: บทความ (Atom)