如何通过AppScript与HTML实现Gmail邮件第一列文本可点击？

问题说明 #

使用AppScript结合HTML模板向Gmail发送表格数据时，需要将表格第一列的所有文本设置为可点击链接，同时确保代码正确运行。

修正后的HTML模板代码（email.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse:collapse;
      }
    </style>
  </head>
  <body>
    <div>
        <div>
          <table style="border:1px;">
            <thead>
              <tr style="color:purple;font-size:16px;">
                <th><?= Taskhindi ?></th>
                <th><?= Task ?></th>
                <th><?= Freq ?></th>
              </tr>
            </thead> 
            <tbody>           
                <? tableRangeValues.forEach((r,i) =>{
                  let color ;
                  if(i % 2 === 0) {color = "silver"} else {color = "light-grey"}
                ?>
                <tr style="background-color :<?= color ?>;">
                  <!-- 👇此列为需要设置可点击的第一列：将单元格文本r[0]作为链接内容，同时以r[0]为跳转URL -->
                  <td align="center">
                    <a href="<?= r[0] ?>" target="_blank"><?= r[0] ?></a>
                  </td>
                  <td align="center"><?= r[1] ?></td>
                  <td align="center"><?= r[2] ?></td>
                </tr> <?}) ?>
            </tbody>
          </table>
        </div>
    </div>
  </body>
</html>

HTML代码修正点说明 #

• 原代码中<a>标签存在三个问题：未用引号包裹URL、缺少可点击的文本内容、未闭合标签，导致链接无法正常工作
• 修正后：
  1. 给href属性值添加双引号，确保URL解析合法
  2. 将第一列的单元格文本r[0]放入<a>标签内，作为可点击的显示内容
  3. 添加target="_blank"属性，让链接在新窗口打开（可选，提升用户体验）
  4. 补充闭合</a>标签，保证HTML结构完整

AppScript代码（Email.gs） #

此部分代码无需修改，可直接使用：

function tablesend ()
{
  const ss =SpreadsheetApp.getActiveSpreadsheet();
  const ws =ss.getSheetByName("UPDATE TASK");

  const Subheader = ws.getRange("B2:I2").getValues();
  const headers = ws.getRange("B3:I3").getValues();
  const Taskhindi = headers[0][0];
  const Task = headers[0][1];
  const Freq = headers[0][2];

  const maxRows=ws.getMaxRows();
  const lr =ws.getLastRow();

  const tableRangeValues =ws.getRange(4, 2,lr-4,3).getValues();

  const htmltemplate = HtmlService.createTemplateFromFile("email");
  htmltemplate.Subheader = Subheader;
  htmltemplate.headers = headers;
  htmltemplate.Taskhindi = Taskhindi;
  htmltemplate.Task = Task;
  htmltemplate.Freq = Freq;
 
  htmltemplate.tableRangeValues = tableRangeValues;

  if(maxRows-lr !=0)
  {
    ws.deleteRows(lr+1, maxRows-lr);
  }

  const htmlforemail = htmltemplate.evaluate().getContent();

  console.log(htmlforemail);

  GmailApp.sendEmail("dme@thedivineempire.com",
  "your report table",
  "please open this mail with a client that support html",
  { htmlBody:htmlforemail }
  );
}

内容的提问来源于stack exchange，提问作者Walter Pit