如何通过Google Apps Script将Google Sheets的HTML转为图片保存到Google Drive

实现思路 #

基于谷歌官方PageSpeed Insights API实现全流程转换，无需额外第三方付费服务，完全适配谷歌生态，可无缝对接你现有代码的存储逻辑。

前置准备 #

• 打开你的Apps Script项目，点击「项目设置」，勾选「在编辑器中显示appsscript.json 清单文件」
• 打开appsscript.json，添加OAuth权限配置：

"oauthScopes": [
  "https://www.googleapis.com/auth/script.external_request",
  "https://www.googleapis.com/auth/drive"
]

• 前往对应项目的Google Cloud控制台，搜索「PageSpeed Insights API」并启用该API

完整代码示例 #

function htmlToImageSaveToDrive(htmlContent, fileName) {
  // 1. 创建临时HTML文件并设置公开访问权限（转换完成后会自动删除）
  const tempHtmlFile = DriveApp.createFile('temp_html_' + new Date().getTime() + '.html', htmlContent, MimeType.HTML);
  tempHtmlFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  const htmlUrl = tempHtmlFile.getUrl();

  try {
    // 2. 调用PageSpeed API生成全页截图
    const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(htmlUrl)}&screenshot=true`;
    const response = UrlFetchApp.fetch(apiUrl, {muteHttpExceptions: true});
    const result = JSON.parse(response.getContentText());
    
    // 3. 解析返回的base64截图数据转为Blob格式
    const screenshotBase64 = result.lighthouseResult.audits['full-page-screenshot'].details.fullPageScreenshot.data.replace(/^data:image\/png;base64,/, '');
    const imgBlob = Utilities.newBlob(Utilities.base64Decode(screenshotBase64), MimeType.PNG, fileName);

    // 4. 保存图片到Drive，完全适配你需要的代码结构
    const savedFile = DriveApp.createFile(imgBlob);
    // 可自定义文件名，比如你原有逻辑：savedFile.setName(text + "_#" + (i + 1));

    return savedFile;
  } catch (err) {
    console.error('转换失败：', err);
    return null;
  } finally {
    // 5. 自动删除临时HTML文件，避免占用Drive空间
    tempHtmlFile.setTrashed(true);
  }
}

// 调用示例
function testConvert() {
  // 替换为你自己生成的HTML字符串即可
  const yourHtml = `
  <table border="1" cellpadding="8" cellspacing="0">
    <tr><th>产品名</th><th>销量</th></tr>
    <tr><td>产品A</td><td>1200</td></tr>
    <tr><td>产品B</td><td>860</td></tr>
  </table>
  `;
  htmlToImageSaveToDrive(yourHtml, '表格截图_1');
}

注意事项 #

• 如果你的HTML内包含外部样式、图片等资源，需要确保这些资源是公开可访问的，否则截图时无法正常加载
• PageSpeed API免费配额为每日25000次请求，满足绝大多数个人及小型业务场景需求
• 如果你对截图清晰度、渲染兼容性有更高要求，也可以替换为第三方HTML转图片服务，仅需修改API调用部分的代码即可
• 如果你的HTML包含敏感信息不适合公开，可以自行部署轻量的Node.js服务（搭载无头浏览器工具），将HTML内容POST到该服务获取图片Blob后再保存到Drive，避免内容泄露风险

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