自定义HTML+CSS转PDF出现黑白显示问题的技术求助

核心问题 #

使用Google Apps Script将带CSS的HTML转换为PDF并通过邮件发送时，生成的PDF丢失原HTML的彩色样式，显示为黑白。

现有代码片段 #

function sendEmails() {
  var data = getBody("DATA");
  var emailData = rowsToObjects(data);

  emailData.forEach(function (rowObject) {
    const pdfhtml = HtmlService.createHtmlOutputFromFile('body-pdf').getContent();
    const data = renderHtml(rowObject);
    const htmlContent = pdfhtml.replace('hereismytabledata',data).replace('$CUSTNAME',rowObject['NAMA PARTNER']);

    const blob = Utilities.newBlob(htmlContent, MimeType.HTML);
    blob.setName('Rincian Tagihan.pdf');

    var emailSubjectTemplate = 'Konfirmasi Tagihan tanggal {{TANGGAL AWAL}} - {{TANGGAL AKHIR}} '; 
    var emailBodyTemplate = HtmlService.createHtmlOutputFromFile('body-email').getContent();

    var emailSubject = renderTemplate(emailSubjectTemplate, rowObject);
    var body = renderTemplate(emailBodyTemplate, rowObject);

    const recipientEmail = rowObject['EMAIL'];

    console.log(emailSubject,body,recipientEmail)

    MailApp.sendEmail({
      to: recipientEmail,
      subject: emailSubject,
      htmlBody: body,
      attachments: [blob.getAs(MimeType.PDF)],
    });
  });
}

解决方案 #

1. 改用HtmlService的HTML输出对象直接转PDF #

Utilities.newBlob转HTML到PDF时无法配置渲染参数，改用HtmlService.createHtmlOutput()生成的对象转PDF，能更好地保留样式：

// 替换原blob生成代码
const htmlOutput = HtmlService.createHtmlOutput(htmlContent);
const pdfBlob = htmlOutput.getAs(MimeType.PDF);
pdfBlob.setName('Rincian Tagihan.pdf');

// 发送邮件时使用新生成的pdfBlob
MailApp.sendEmail({
  to: recipientEmail,
  subject: emailSubject,
  htmlBody: body,
  attachments: [pdfBlob],
});

2. 添加打印样式强制保留颜色 #

在HTML的<style>标签中加入打印媒体查询，强制PDF转换引擎保留彩色：

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* 也可针对特定元素单独设置，比如表格、标题 */
  table, th, td, h1, p {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

3. 确保样式是内联或嵌入的 #

如果HTML使用了外部CSS链接，PDF转换时可能无法加载外部资源导致样式丢失，建议：

• 将所有CSS代码嵌入到HTML的<style>标签中
• 对需要彩色的元素直接使用内联样式（如<td style="background-color: #4CAF50; color: white;">）

验证步骤 #

1. 修改代码后，先单独测试PDF生成：用DriveApp.createFile(pdfBlob)将PDF保存到云端硬盘，检查是否保留彩色
2. 确认样式生效后，再重新运行邮件发送函数

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