如何在iframe加载完成后将Google Apps Script的HTML输出转为PDF

云原生阿岚

2026-8-3

问题：HtmlService含iframe的HTML转PDF未加载iframe内容

当前使用HtmlService生成包含iframe的HTML输出，直接转换为PDF并发送邮件时，PDF仅显示未加载完成的iframe框，核心原因是服务端生成PDF时未等待iframe内内容加载完成，直接渲染了初始状态的页面。

解决方案：客户端监听iframe加载完成后触发PDF生成

需要通过客户端脚本监听iframe的加载事件，确认内容加载完成后，再将完整的页面HTML传给服务端生成PDF，具体实现如下：

完整代码示例（Google Apps Script）

服务端核心代码

// 返回带监听脚本的初始页面
function initPDFGeneration() {
  var targetIframeUrl = "https://..."; // 替换为你的iframe目标地址
  var emailRecipient = "..."; // 替换为收件邮箱

  var htmlContent = `
    <script>
      // 监听页面和iframe加载状态
      window.addEventListener('DOMContentLoaded', () => {
        const iframe = document.getElementById('content-iframe');
        iframe.onload = () => {
          // 将加载完成后的完整页面HTML传给服务端
          google.script.run.generateAndSendPDF(document.documentElement.outerHTML, '${emailRecipient}');
        };
      });
    </script>
    <iframe id="content-iframe" src="${targetIframeUrl}" width="100%" height="100%" frameborder="0"></iframe>
  `;

  return HtmlService.createHtmlOutput(htmlContent)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

// 生成PDF并发送邮件
function generateAndSendPDF(fullPageHtml, recipient) {
  var htmlOutput = HtmlService.createHtmlOutput(fullPageHtml)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
  var pdfBlob = htmlOutput.getAs('application/pdf');
  
  MailApp.sendEmail({
    to: recipient,
    subject: "Test",
    body: "pfa",
    attachments: [pdfBlob]
  });
}