如何解决通过Apps Script发送的HTML内容存在过多内边距的问题？

从Google Docs导出的HTML作为邮件正文时，用户收到的邮件顶部、右侧、左侧和底部会出现过多内边距，可通过以下方式调整：

当前获取HTML的代码 #

var url = "https://docs.google.com/feeds/download/documents/export/Export?id=" + emailBodyTemplateId + "&exportFormat=html";
    
var param = {
    method: "get",
    headers: {
        "Authorization": "Bearer " + ScriptApp.getOAuthToken()
    },
    muteHttpExceptions: true,
};

var messageBody = emailBodyForResponse || UrlFetchApp.fetch(url, param).getContentText();

（注：原代码存在多余闭合括号，已修正）

解决方案 #

1. 清理导出HTML的默认内边距样式 #

Google Docs导出的HTML会自带容器内边距，可通过字符串替换移除或覆盖这些样式：

var rawHtml = UrlFetchApp.fetch(url, param).getContentText();
// 替换body标签的默认内边距
var cleanedHtml = rawHtml.replace(/<body[^>]*style="[^"]*padding:[^"]*"/gi, '<body style="margin:0; padding:0;"');
// 移除所有元素的多余padding样式
cleanedHtml = cleanedHtml.replace(/padding:\s*\d+px[^;"]*;/gi, 'padding:0;');
var messageBody = emailBodyForResponse || cleanedHtml;

2. 添加CSS重置适配多邮件客户端 #

不同邮件客户端对HTML解析规则有差异，可在HTML开头添加全局样式重置，确保内边距统一：

var rawHtml = UrlFetchApp.fetch(url, param).getContentText();
// 插入CSS重置代码
var cssReset = '<style type="text/css">body, div, p { margin:0; padding:0; width:100%; }</style>';
// 替换body标签样式并拼接重置代码
var cleanedHtml = cssReset + rawHtml.replace(/<body[^>]*>/i, '<body style="margin:0; padding:0;">');
var messageBody = emailBodyForResponse || cleanedHtml;

3. 手动包裹外层容器兜底 #

如果上述方法仍有残留内边距，可给整个HTML内容包裹一个自定义容器，强制覆盖样式：

var rawHtml = UrlFetchApp.fetch(url, param).getContentText();
var wrappedHtml = '<div style="margin:0; padding:0; width:100%;">' + rawHtml + '</div>';
var messageBody = emailBodyForResponse || wrappedHtml;

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