Google Apps Script Web应用无法显示Google Sheet图片求助

问题分析 #

你的代码核心问题集中在两点：

• 提取IMAGE()函数中图片URL的正则逻辑错误，无法适配多数合法的IMAGE函数写法
• 处理浮动图片时强制转换为JPEG格式，若原图片为PNG等其他格式会导致损坏，同时行号列号映射存在偏差

修正后的完整代码 #

const sheetId = "1q4qRgXSq6xXhddArPCoBIuOOupRvokUd0andADCNN0Q";
const sheetName = "MAIN";

function doGet() {
  return HtmlService.createHtmlOutput(getHtml());
}

function getHtml() {
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
  if (!sheet) {
    return 'Error: Sheet not found.';
  }

  // 获取原始数据（保留公式内容而非计算结果）
  const data = sheet.getDataRange().getValues();
  const images = sheet.getImages();

  // 构建图片映射：行-列 => 图片Base64数据+MIME类型
  let imageMap = {};
  images.forEach(image => {
    const row = image.getAnchorCell().getRow();
    const column = image.getAnchorCell().getColumn();
    const blob = image.getBlob();
    const base64Data = Utilities.base64Encode(blob.getBytes());
    imageMap[`${row}-${column}`] = {
      data: base64Data,
      mimeType: blob.getContentType()
    };
  });

  // 构建HTML结构
  let htmlOutput = `<html><head><style>`;
  htmlOutput += `body { font-family: 'Helvetica', 'Arial', sans-serif; }`;
  htmlOutput += `table { border-collapse: collapse; width: 100%; }`;
  htmlOutput += `th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }`;
  htmlOutput += `th { background-color: #f2f2f2; }`;
  htmlOutput += `img { max-width: 100px; max-height: 100px; object-fit: contain; }`;
  htmlOutput += `</style></head><body>`;
  
  htmlOutput += `<form id='searchForm' onsubmit='return submitForm()'>`;
  htmlOutput += `<div>`;
  htmlOutput += `<label for='userInputD2'>输入D2的值: </label>`;
  htmlOutput += `<input type='text' id='userInputD2' placeholder='输入D2的值'><br>`;
  htmlOutput += `<label for='userInputD3'>输入D3的值: </label>`;
  htmlOutput += `<input type='text' id='userInputD3' placeholder='输入D3的值'><br>`;
  htmlOutput += `<button type='submit'>提交</button>`;
  htmlOutput += `</div><br>`;

  htmlOutput += `<table>`;

  // 生成表头
  htmlOutput += `<tr>`;
  for (let i = 0; i < data[0].length; i++) {
    htmlOutput += `<th>${data[0][i]}</th>`;
  }
  htmlOutput += `</tr>`;

  // 生成表格内容（跳过第2、3行）
  for (let i = 1; i < data.length; i++) {
    if (i === 1 || i === 2) continue;
    htmlOutput += `<tr>`;
    for (let j = 0; j < data[i].length; j++) {
      let value = data[i][j];
      const rowNum = i + 1;
      const colNum = j + 1;
      const imageKey = `${rowNum}-${colNum}`;

      // 处理单元格关联的浮动图片
      if (imageMap[imageKey]) {
        const { data: base64, mimeType } = imageMap[imageKey];
        value = `<img src='data:${mimeType};base64,${base64}' alt='表格图片' />`;
      } 
      // 处理IMAGE函数引用的图片
      else if (typeof value === 'string' && value.startsWith('=IMAGE(')) {
        const imageUrl = extractImageUrlFromFormula(value);
        if (imageUrl) {
          value = `<img src='${imageUrl}' alt='公式引用图片' />`;
        }
      }

      htmlOutput += `<td>${value || ''}</td>`;
    }
    htmlOutput += `</tr>`;
  }
  htmlOutput += `</table>`;
  htmlOutput += `</form>`;

  // 客户端交互脚本
  htmlOutput += `<script>`;
  htmlOutput += `function submitForm() {`;
  htmlOutput += `const d2Val = document.getElementById('userInputD2').value;`;
  htmlOutput += `const d3Val = document.getElementById('userInputD3').value;`;
  htmlOutput += `google.script.run.withSuccessHandler(refreshPage).updateCells([d2Val, d3Val]);`;
  htmlOutput += `return false;`;
  htmlOutput += `}`;
  htmlOutput += `function refreshPage() {`;
  htmlOutput += `google.script.run.withSuccessHandler(updateHtml).getHtml();`;
  htmlOutput += `}`;
  htmlOutput += `function updateHtml(html) {`;
  htmlOutput += `document.body.innerHTML = html;`;
  htmlOutput += `}`;
  htmlOutput += `</script>`;

  htmlOutput += `</body></html>`;

  return htmlOutput;
}

function updateCells(values) {
  try {
    const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
    sheet.getRange("D2").setValue(values[0]);
    sheet.getRange("D3").setValue(values[1]);
    return "D2和D3单元格更新成功。";
  } catch (error) {
    console.error("更新单元格出错:", error);
    return "更新单元格失败。";
  }
}

function extractImageUrlFromFormula(formula) {
  // 适配带引号/不带引号、带额外参数的IMAGE函数写法
  const regex = /IMAGE\(\s*(["']?)(https?:\/\/[^"')]+)\1\s*(?:,\s*[\d\w]+\s*)*\)/i;
  const match = formula.match(regex);
  return match ? match[2] : "";
}

关键修改说明 #

1. 数据获取调整：将getDisplayValues()改为getValues()，保留单元格原始公式内容，确保能识别IMAGE()函数
2. 浮动图片处理优化：
   • 保留图片原始MIME类型，避免强制转JPEG导致的格式损坏
   • 存储图片Base64数据和类型，生成正确的Data URL
3. IMAGE函数解析修复：替换正则表达式，适配多种合法的IMAGE函数写法
4. 样式优化：给图片添加最大宽高限制，防止撑爆表格布局

表格图片格式建议 #

推荐采用以下任意一种方式存储图片，确保兼容性：

• 使用IMAGE()函数引用公网可访问的图片URL（确保URL无特殊字符且允许跨域）
• 将图片直接插入到单元格中（而非浮动在表格上方），让getImages()能正确关联到对应单元格

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