如何在Google Web App中将表格链接文本转为可点击链接？

你的问题核心在于：getDisplayValues()仅获取单元格的显示文本，而非可点击的HTML链接结构，DataTables默认直接渲染文本内容，导致链接无法点击。以下是两种可行的解决方法：

方法一：在Google Apps Script中预处理链接为HTML格式 #

根据表格中链接的存储形式，分两种情况处理：

情况1：第三列是直接填写的完整URL #

修改getData()函数，将URL转换为<a>标签：

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function getData(){
  const ss = SpreadsheetApp.openByUrl('**********************');
  const srcSheet = ss.getSheetByName("Sheet1");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues();
  
  // 处理第三列（数组索引为2）的链接
  const processedData = srcValues.map(row => {
    const linkText = row[2];
    if (linkText.startsWith('http')) {
      row[2] = `<a href="${linkText}" target="_blank">${linkText}</a>`;
    }
    return row;
  });
  
  return processedData;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

情况2：第三列是Google表格的超链接（显示文本≠实际URL） #

如果单元格是通过「插入链接」功能设置的，需要用getRichTextValues()提取实际链接地址：

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function getData(){
  const ss = SpreadsheetApp.openByUrl('**********************');
  const srcSheet = ss.getSheetByName("Sheet1");
  // 获取富文本值以提取超链接
  const srcRichValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getRichTextValues();
  
  const processedData = srcRichValues.map(row => {
    const richText = row[2];
    let linkContent = richText.getText();
    // 提取单元格中的超链接地址
    if (richText.getLinkUrl()) {
      linkContent = `<a href="${richText.getLinkUrl()}" target="_blank">${richText.getText()}</a>`;
    }
    // 将其他列转为文本返回
    return [
      row[0].getText(),
      row[1].getText(),
      linkContent,
      row[3].getText()
    ];
  });
  
  return processedData;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

方法二：在前端JavaScript中处理链接 #

如果不想修改GAS代码，可在DataTables配置中添加渲染规则，将第三列文本转为可点击链接：

修改HTML中的脚本部分：

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {"title":"File"},
          {"title":"Content"},
          {"title":"Link"},
          {"title":"Contact"}
        ],
        columnDefs: [
          {
            targets: 2, // 第三列（索引从0开始）
            render: function(data, type, row) {
              // 仅在显示模式下转换为链接，不影响排序等功能
              if (type === 'display' && data.startsWith('http')) {
                return `<a href="${data}" target="_blank">${data}</a>`;
              }
              return data;
            }
          }
        ]
      });
    });
  }
</script>

注意事项 #

• 若使用GAS返回HTML内容，HtmlService默认允许渲染HTML，若遇到安全限制，可在evaluate()后添加.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)（按需调整）。
• 确保链接是有效的完整URL，否则<a>标签无法正常跳转。

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