嵌入iframe的Google Apps Script无法触发执行问题求助

问题场景 #

将Google表格通过iframe嵌入网站后，页面显示正常，但点击“Save As pdf”按钮时，仅会重载iframe，无法触发表格内的savePDFs()脚本，怀疑与X-Frame-Options设置相关。

原代码参考 #

前端嵌入代码

<iframe height="600px" width="100%" id="frame" src="https://docs.google.com/spreadsheets/d/SHEET_ID/edit?usp=sharing?widget=true&amp;headers=false#=gid=0" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:70px;left:0px;right:0px;bottom:0px" ></iframe>

<button onclick="savePDFs()">Save As pdf</button>
<script>
  function savePDFs(){
    document.getElementById("frame").src = "https://docs.google.com/spreadsheets/d/SHEET_ID/edit?usp=sharing?widget=true&amp;headers=false#gid=0";
  }
</script>

疑似相关Apps Script服务端代码

// Serve HTML with no X-Frame-Options header (in Apps Script server-side code).
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

Google表格内的savePDFs()脚本

function savePDFs() {
SpreadsheetApp.getActiveSpreadsheet();
   var url = "https://docs.google.com/spreadsheets/d/SHEET_ID/";
  var folders = DriveApp.getFolderById("FOLDER_ID");  // Modify

  var sheet = SpreadsheetApp.getActiveSpreadsheet(); 
  var url_ext = 'export?exportFormat=pdf&format=pdf'   //export as pdf
  + '&size=letter'      // paper size
  + '&portrait=false'    // orientation, false for landscape
  + '&fitw=true'        // fit to width, false for actual size
  + '&sheetnames=false&printtitle=false&pagenumbers=false'  //hide optional headers and footers
  + '&gridlines=false'  // hide gridlines
  + '&fzr=false';       // do not repeat row headers (frozen rows) on each page
  var options = {headers: {'Authorization': 'Bearer ' +  ScriptApp.getOAuthToken()}}
  var response = UrlFetchApp.fetch(url + url_ext, options);
  var valor = sheet.getRange('A22').getValue();  // Modify
  var blob = response.getBlob().setName( valor + '.pdf');
  folders.createFile(blob);
}

问题根源 #

1. 原前端代码仅重载iframe的URL，完全没有触发表格内Apps Script函数的逻辑
2. 浏览器跨域限制会阻止父页面直接调用iframe内的Google表格脚本，即使X-Frame-Options设置为允许嵌入，也无法突破跨域脚本调用的限制

解决方案：通过Google Apps Script Web App中转 #

核心思路是把PDF生成逻辑通过Web App暴露出来，让前端按钮直接调用Web App接口，绕过iframe跨域限制。

步骤1：调整并部署Apps Script为Web App

打开Google表格的脚本编辑器，替换原有代码为以下内容，然后部署为Web App：

// 处理前端POST请求的入口函数
function doPost(e) {
  try {
    savePDFs();
    return ContentService.createTextOutput('PDF已成功保存到指定文件夹');
  } catch (error) {
    return ContentService.createTextOutput('生成失败：' + error.message).setStatusCode(500);
  }
}

// PDF生成核心逻辑
function savePDFs() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet();
  // 用表格ID动态生成URL，避免硬编码
  const url = `https://docs.google.com/spreadsheets/d/${sheet.getId()}/`;
  const targetFolder = DriveApp.getFolderById("FOLDER_ID");  // 替换为你的目标文件夹ID

  const exportParams = 'export?exportFormat=pdf&format=pdf'
    + '&size=letter'
    + '&portrait=false'
    + '&fitw=true'
    + '&sheetnames=false&printtitle=false&pagenumbers=false'
    + '&gridlines=false'
    + '&fzr=false';

  const options = {
    headers: {'Authorization': `Bearer ${ScriptApp.getOAuthToken()}`}
  };
  
  const response = UrlFetchApp.fetch(url + exportParams, options);
  const fileName = sheet.getRange('A22').getValue() + '.pdf';  // 从单元格获取文件名
  targetFolder.createFile(response.getBlob().setName(fileName));
}

部署Web App操作：

• 点击脚本编辑器右上角“部署”→“新部署”
• 类型选择“Web 应用”
• 执行权限：按需选择，允许匿名访问选“任何人，甚至匿名”，需用户登录选“任何人”
• 完成设置后点击“部署”，复制生成的Web App URL

步骤2：修改前端代码

替换原前端的savePDFs()函数，让按钮直接请求Web App接口：

<!-- 修正iframe的URL错误：把第二个?改为& -->
<iframe height="600px" width="100%" id="frame" src="https://docs.google.com/spreadsheets/d/SHEET_ID/edit?usp=sharing&widget=true&headers=false#gid=0" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:70px;left:0px;right:0px;bottom:0px" ></iframe>

<button onclick="savePDFs()">Save As pdf</button>
<script>
  async function savePDFs(){
    try {
      const webAppUrl = '你的Web App URL';  // 替换为刚才复制的Web App地址
      const response = await fetch(webAppUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
        // 若需用户登录，添加 credentials: 'include'
      });

      if (!response.ok) throw new Error('请求失败');
      const result = await response.text();
      alert(result);
    } catch (error) {
      alert('生成PDF出错：' + error.message);
      console.error(error);
    }
  }
</script>

关键注意事项 #

• 部署Web App时，确保当前账号拥有Google表格和目标文件夹的读写权限
• 若Web App设置为需要登录，前端请求需添加credentials: 'include'，且用户需登录Google账号
• 原iframe的URL存在语法错误：?usp=sharing?widget=true中的第二个?要改为&，否则URL参数解析会出错

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