Google Apps Script：导出带样式的HTML表单数据至PDF

完全可行，以下是具体实现思路和代码示例：

核心步骤 #

1. 读取Google Sheets中的提交数据 #

用Google Apps Script（GAS）直接操作目标工作表，根据提交记录的行号或唯一标识提取对应字段数据：

function getSubmittedData(rowId) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("表单提交记录");
  const rowData = sheet.getRange(rowId, 1, 1, sheet.getLastColumn()).getValues()[0];
  // 按实际表单字段顺序返回数据对象
  return {
    name: rowData[0],
    email: rowData[1],
    phone: rowData[2]
  };
}

2. 复用原表单样式生成填充数据的HTML #

把原表单的HTML结构和CSS样式复制到GAS的HTML模板文件中，将输入框替换为动态数据占位符：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 直接复制原表单的CSS代码 */
    .form-wrapper { width: 700px; margin: 30px auto; border: 1px solid #eee; padding: 25px; }
    .form-item { margin-bottom: 18px; }
    .form-label { display: inline-block; width: 120px; font-weight: bold; }
    .form-value { padding: 8px; border: 1px solid #ddd; width: 500px; }
  </style>
</head>
<body>
  <div class="form-wrapper">
    <h3>表单提交详情</h3>
    <div class="form-item">
      <span class="form-label">姓名：</span>
      <span class="form-value"><?= data.name ?></span>
    </div>
    <div class="form-item">
      <span class="form-label">邮箱：</span>
      <span class="form-value"><?= data.email ?></span>
    </div>
    <div class="form-item">
      <span class="form-label">电话：</span>
      <span class="form-value"><?= data.phone ?></span>
    </div>
  </div>
</body>
</html>

3. 将填充后的HTML转为PDF #

通过GAS把渲染后的HTML输出转为PDF，可保存到Google Drive或直接发送给提交人：

function generatePdf(rowId) {
  const data = getSubmittedData(rowId);
  const htmlTemplate = HtmlService.createTemplateFromFile("FormTemplate");
  htmlTemplate.data = data;
  const htmlOutput = htmlTemplate.evaluate().setWidth(700).setHeight(900);
  
  // 生成PDF并保存到Drive
  const pdfFile = DriveApp.createFile(htmlOutput.getAs("application/pdf"));
  pdfFile.setName(`表单记录_${data.name}_${new Date().toLocaleDateString()}.pdf`);
  
  // 可选：自动发送PDF到提交邮箱
  GmailApp.sendEmail(data.email, "您的表单提交凭证", "", {
    attachments: [pdfFile],
    htmlBody: "<p>您好，这是您的表单提交详情PDF文件，请查收。</p>"
  });
  
  return pdfFile.getUrl();
}

4. 设置触发时机 #

• 自动触发：在GAS中创建onFormSubmit触发器，绑定表单提交事件，用户提交后自动生成PDF。
• 手动触发：在Google Sheets中添加自定义菜单，点击菜单即可为指定行生成PDF。

注意事项 #

• 原表单的图片资源需上传到Google Drive并设置公开访问，在HTML模板中使用公开链接引用，避免PDF中图片缺失。
• 测试时先用单条数据验证样式和数据准确性，再批量处理。
• 若原表单有复杂交互（如动态显示字段），需在HTML模板中还原对应静态结构，确保PDF样式一致。

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