程式分享如下：

code.js


// 哪一個檔案要顯示資料
function doGet(e) {
  var x = HtmlService.createTemplateFromFile("index");
  var y = x.evaluate();
  // 避免無法顯示，使用XFrame allow all
  var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return z;
}

// 顯示單一資料
function getSheetData1()  { 
  var x= SpreadsheetApp.getActiveSpreadsheet();
  var y= x.getSheetByName('Sheet1'); 
  var z = y.getRange('B2');
  return z.getValues();   
}

// 抓整列資料
function getSheetData2()  { 
   var x= SpreadsheetApp.getActiveSpreadsheet();
  var y= x.getSheetByName('Sheet1'); 
  var z = y.getDataRange();
  return z.getValues();  

  
}

  // var x= SpreadsheetApp.getActiveSpreadsheet();
  // var y= x.getSheetByName('Sheet1'); 
  // var z = y.getRange('A2:A4');
  // return z.getValues();  

// 抓圖片資料
function getSheetData3()  { 
  var x= SpreadsheetApp.getActiveSpreadsheet();
  var y= x.getSheetByName('Sheet1'); 
  var z = y.getDataRange();
  return z.getValues();   
}

// 抓全部
function getSheetData4()  { 
  var x= SpreadsheetApp.getActiveSpreadsheet();
  var y= x.getSheetByName('Sheet1'); 
  var z = y.getDataRange();
  return z.getValues();   
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <style>

       .row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 30px;
            /* background-color: lightgreen; */
            margin: 30px 80px 30px 80px;
        }
        
    

      .row img{
        width:100%;
        height:100%;
        border-radius:10px;
        filter:grayscale(100%);
        transition:1s;
      }
      img:hover{
        filter:grayscale(0%);
        transition:1s;
      }

    table,
        th,
        td {
            border: 1px solid black;
            font-size:30px;
        }
      </style>


  </head>
  <body>
 
<h1 style="text-align:center;">Google Sheets資料顯示方法介紹 </h1>
<br>
  <h2 style="text-align:center;font-style:italic;">How to display data from Google Sheets to Webpages</h2>
<!-- 顯示單一資料 -->
<h2>單一資料顯示</h2>
<h1>

<!-- <?var data = getSheetData1();?>
 <?for(var i = 0; i < data.length; i++) { ?>
 <?for(var j = 0; j < data[i].length; j++) { ?>
<?= data[i][j] ?>
 <? } ?>
  <? } ?> -->
<?var data = getSheetData1();?>

<?= data ?>


  </h1>
<hr>
  <!-- 顯示列表資料 -->

<h2>列表資料顯示</h2>

<?var data = getSheetData2();?>

<ol>
   <?for(var i = 1; i < data.length; i++) { ?>
   <!-- email在第三欄位 -->
 <?for(var j = 1; j < 2; j++) { ?>
  <li>
<?= data[i][j] ?>
  </li>
 <? } ?>
  <? } ?>
</ol>

<hr>
 <!-- 下拉式資料 -->
<h2>下拉式Drowdown資料顯示</h2>


<label>請選擇</label>
<?var data = getSheetData2();?>
<select>
   <?for(var i = 1; i < data.length; i++) { ?>
 <?for(var j = 0; j < 1; j++) { ?>
  <option>
<?= data[i][j] ?>
    </option>
 <? } ?>
  <? } ?>
</select>

<hr>

<!-- 顯示圖片 -->

<h2>顯示圖片</h2>


<div class="row">
  <?var data = getSheetData3();?>
<?for(var i = 1; i < data.length; i++) { ?>
<!-- 圖片在第三欄位 -->
 <?for(var j = 2; j < 3; j++) { ?>

<img src=<?= data[i][j] ?>> 

   <? } ?>
  <? } ?>

</div>


 <hr>
<h2>資料表格</h2>
 <? var data = getSheetData4(); ?>
    <table>
       <? for (var i = 0; i < data.length; i++) { ?>
       <tr>
         <? for (var j = 0; j < data[i].length; j++) { ?>
     <td>
       <?= data[i][j] ?>
       </td>
       <? } ?>
       </tr>
        <? } ?>
    </table>
  </body>
</html>

.

發表迴響