如何在App Script中实现HTML转PDF渲染一致并保存至Google Drive

问题根源 #

你当前使用的Utilities.newBlob().getAs('application/pdf')调用的是Google内置的轻量HTML渲染引擎，不支持完整的CSS3、异步JS加载、外部样式/字体/资源的完整渲染，和你用的Chrome扩展依赖的Chromium内核渲染逻辑完全不同，所以最终生成的PDF效果差异很大。

可选解决方案 #

方案1：资源内联优化（适合无复杂JS的简单HTML页面）

如果你的页面没有动态渲染的JS内容，仅存在样式、图片加载异常的问题，可以先把HTML所有外部资源内联，再添加打印专用CSS规则后转换，能大幅提升匹配度：

• 所有外部CSS内容直接写入<style>标签内嵌到HTML头部
• 所有图片转成base64编码直接写入src属性
• 添加打印样式固定页面尺寸、边距，保证样式不偏移

修改后的代码参考：

function downloadFile() {
  const fileURL = "你的HTML页面地址";
  const targetFolderId = "1gBA8YCs3PH7v7CNl3nlsjNqYzhOxhjYa";
  let fileName = "";
  let fileSize = "";

  const response = UrlFetchApp.fetch(fileURL, {
    headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
  })
  let htmlBody = response.getContentText();
  const rc = response.getResponseCode();

  if (rc == 200) {
    // 注入打印专用CSS
    const printCss = `
    <style>
    @media print {
      @page {
        size: A4; /* 可替换为和你页面匹配的尺寸 */
        margin: 0;
      }
      body {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 0;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
    }
    </style>
    `;
    htmlBody = htmlBody.replace('</head>', `${printCss}</head>`);

    const blob = Utilities.newBlob(htmlBody, MimeType.HTML).getAs('application/pdf').setName('Nota.pdf');
    const folder = DriveApp.getFolderById(targetFolderId);
    if(folder){
      const file = folder.createFile(blob);
      fileName = file.getName()
      fileSize = file.getSize()
    }
  }
  const fileInfo = {'rc':rc,"filename": fileName, "fileSize":fileSize}
  Logger.log(fileInfo)
}

方案2：Chromium内核转换（完全匹配Chrome渲染效果，适合复杂页面）

如果你的页面有JS动态渲染内容、复杂样式，需要和Chrome扩展转换效果完全一致，可以部署基于Puppeteer（无头Chrome）的转换服务，在Apps Script中调用该服务获取PDF即可。

1. 部署Node.js服务，核心逻辑参考：

const puppeteer = require('puppeteer');
exports.convertHtmlToPdf = async (req, res) => {
  const { htmlUrl, authToken } = req.body;
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  // 传入授权头访问需要鉴权的页面
  await page.setExtraHTTPHeaders({ Authorization: `Bearer ${authToken}` });
  await page.goto(htmlUrl, { waitUntil: 'networkidle0' });
  const pdf = await page.pdf({ format: 'A4', printBackground: true, margin: 0 });
  await browser.close();
  res.setHeader('Content-Type', 'application/pdf');
  res.send(pdf);
};

2. 修改Apps Script代码调用转换服务：

function downloadFile() {
  const fileURL = "你的HTML页面地址";
  const convertServiceUrl = "你部署的转换服务地址";
  const targetFolderId = "1gBA8YCs3PH7v7CNl3nlsjNqYzhOxhjYa";
  let fileName = "";
  let fileSize = "";

  const response = UrlFetchApp.fetch(convertServiceUrl, {
    method: 'POST',
    contentType: 'application/json',
    payload: JSON.stringify({
      htmlUrl: fileURL,
      authToken: ScriptApp.getOAuthToken()
    })
  });
  const rc = response.getResponseCode();

  if (rc == 200) {
    const blob = response.getBlob().setName('Nota.pdf');
    const folder = DriveApp.getFolderById(targetFolderId);
    if(folder){
      const file = folder.createFile(blob);
      fileName = file.getName()
      fileSize = file.getSize()
    }
  }
  const fileInfo = {'rc':rc,"filename": fileName, "fileSize":fileSize}
  Logger.log(fileInfo)
}

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