Google表格Web应用链接失效问题技术求助

问题根源在于你当前用getValues()获取的是单元格的纯文本内容，完全丢失了超链接的格式信息。要保留链接功能，得改用富文本数据获取方法，再把链接转换成HTML可识别的<a>标签。

修改Google Apps Script代码 #

把getSheetData()函数改成下面这样，用getRichTextValues()提取富文本内容，自动识别链接并生成HTML：

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
  return htmlOutput.evaluate();
}

function getSheetData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Single Job View');
  var dataRange = dataSheet.getDataRange();
  // 获取富文本格式的数据，而非纯文本
  var richTextValues = dataRange.getRichTextValues();
  var processedData = [];
  
  for (var i = 0; i < richTextValues.length; i++) {
    var row = [];
    for (var j = 0; j < richTextValues[i].length; j++) {
      var richText = richTextValues[i][j];
      var text = richText.getText();
      
      if (!text) {
        row.push('');
        continue;
      }
      
      // 检查单元格内的所有链接片段
      var links = richText.getLinks();
      var htmlContent = text;
      
      if (links.length > 0) {
        htmlContent = '';
        var lastPosition = 0;
        links.forEach(link => {
          var start = link.getStartIndex();
          var end = link.getEndIndex();
          var url = link.getUrl();
          
          // 拼接链接前的普通文本
          if (start > lastPosition) {
            htmlContent += text.substring(lastPosition, start);
          }
          // 生成带跳转的a标签
          htmlContent += `<a href="${url}" target="_blank">${text.substring(start, end)}</a>`;
          lastPosition = end;
        });
        // 拼接链接后的剩余文本
        if (lastPosition < text.length) {
          htmlContent += text.substring(lastPosition);
        }
      }
      
      row.push(htmlContent);
    }
    processedData.push(row);
  }
  
  return processedData;
}

修改HTML模板 #

原来的<pre><?= cellValue ?></pre>会把HTML代码当成纯文本显示，要改成不转义的输出方式，同时可以给链接加个样式：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        padding: 5px;
        border: 1px solid black;
        white-space: pre-wrap;
      }

      td.empty {
        border: none;
      }
      
      td a {
        color: #1a0dab;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>Display Google Sheet Web App</h1>
    <table>
      <? var tableData = getSheetData(); ?>
      <? for (var i = 0; i < tableData.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < tableData[i].length; j++) { ?>
            <? var cellValue = tableData[i][j]; ?>
            <? var cellClass = cellValue ? '' : 'empty'; ?>
            <!-- 使用<?!= ?>输出未转义的HTML内容 -->
            <td class="<?= cellClass ?>"><?!= cellValue ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

关键修改说明 #

1. 脚本端：用getRichTextValues()替代getValues()，能获取单元格内的文本格式和链接信息，然后把带链接的片段转换成HTML的<a>标签，保留文本和链接的混合结构。
2. 前端模板：<?!= ?>是Google Apps Script模板的未转义输出语法，能直接把生成的HTML渲染成可点击的链接，而不是显示成纯文本代码。

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