Google Apps Script中HTML转PDF时CSS样式丢失问题

嘿，这个问题我之前帮不少开发者搞定过！你遇到的字体等格式丢失问题，核心原因是Google Apps Script默认的PDF渲染机制没有正确解析HTML里的样式资源，或者缺少关键的渲染配置。咱们一步步来解决：

1. 内联所有CSS样式 #

如果你的HTML依赖外部CSS文件（比如<link rel="stylesheet" href="style.css">），或者用了相对路径的样式资源，PDF渲染器大概率加载不到这些内容。最稳妥的做法是：

• 把外部CSS的全部代码复制到HTML的<head>标签内的<style>里
• 或者直接把样式内联到每个HTML元素上（比如<p style="font-family: 'Arial', sans-serif; font-size: 14px;">）

这样能确保渲染器直接读取到所有样式规则，不会因为资源路径问题丢失格式。

2. 启用高级PDF渲染配置 #

默认的DriveApp.createFile方法没有提供足够的渲染参数，咱们改用Advanced Drive Service来导出PDF，它支持更多控制选项，比如强制渲染CSS背景、指定字体加载策略：

首先要启用Advanced Drive Service：

• 在脚本编辑器顶部，点击「资源」→「高级Google服务」
• 找到「Drive API」，开启它并保存

然后用下面的代码替换你原来的逻辑：

function convertHtmlToPdfWithFullStyles() {
  const folderId = "0B9EI2E_9Cj9rT1JmVk5ESnhVbjA";
  const folder = DriveApp.getFolderById(folderId);
  const htmlFiles = folder.getFilesByType(MimeType.HTML);

  while (htmlFiles.hasNext()) {
    const htmlFile = htmlFiles.next();
    const fileName = htmlFile.getName().replace(".html", ".pdf");

    // 使用Drive API导出PDF，配置关键渲染选项
    const pdfExportOptions = {
      pdfOptions: {
        printCssBackground: true, // 强制渲染CSS背景和样式
        pageSize: "A4", // 指定纸张大小
        usePageHeaderFooter: false, // 按需关闭默认页眉页脚
        marginTop: 0.75,
        marginBottom: 0.75
      }
    };

    // 执行导出
    const pdfFile = Drive.Files.export(htmlFile.getId(), "application/pdf", pdfExportOptions);
    // 将PDF保存到原文件夹
    folder.createFile(DriveApp.getFileById(pdfFile.id).getBlob().setName(fileName));
  }
}

3. 处理自定义字体 #

如果用了非系统默认的字体（比如Google Fonts），别用<link>引用，而是把字体文件转成Base64编码内联到CSS里，比如：

@font-face {
  font-family: 'Roboto';
  src: url(data:font/truetype;base64,AAEAAAATAQA...); // 这里替换成你的字体Base64内容
  font-weight: normal;
  font-style: normal;
}

这样渲染器不用去外部加载字体，能100%保证字体显示正确。

4. 优化HTML基础结构 #

确保你的HTML是标准结构：

• 开头加上<!DOCTYPE html>声明
• 包含完整的<html>、<head>、<body>标签
• 避免用JavaScript动态生成样式（PDF渲染器不会执行JS，动态样式会丢失）

额外注意点 #

• 如果HTML里有图片，要么转成Base64内联，要么用公开可访问的绝对URL，不然渲染器加载不到图片
• 先拿一个简单的测试HTML文件验证配置，没问题再批量处理所有文件

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