如何通过审批流程发送HTML邮件？代码执行正常但未收到邮件

AI 小北

2026-8-21

问题

能否通过审批流程发送HTML格式邮件？需求是发送一封由条件触发、带有CSS样式的HTML正文邮件，需将code.gs中的ticketNumber值传入HTML对应位置。目前代码执行记录显示无失败，但未收到邮件，怀疑代码存在问题。

相关代码

HTML模板代码

<!DOCTYPE html>
<html>
<head><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="-1"><style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Ubuntu&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body,
html {
    background: white;
    color: black;
    display: grid;
    font-family: "Staatliches", cursive;
    font-size: 14px;
    height: 100vh;
    letter-spacing: 0.1em;
}

.ticket {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    display: flex;
    margin: auto;
}

.left {
    display: flex;
}

.image {
    background-image: url("https://drive.google.com/uc?id=1eCyBxQSZy4XcdhsurTGYHmnhgq1vHfoe");
    background-size: contain;
    height: 270px;
    opacity: 0.85;
    width: 250px;
}

.admit-one {
    position: absolute;
    color: darkgray;
    height: 250px;
    padding: 0 10px;
    letter-spacing: 0.15em;
    display: flex;
    text-align: center;
    justify-content: space-around;
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
}

.admit-one span:nth-child(2) {
    color: #737373;
    font-weight: 700;
}

.left .ticket-number {
    height: 250px;
    width: 250px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 5px;
}

.ticket-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 30px;
    text-align: center;
}

.date {
    align-items: center;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    display: flex;
    font-weight: 700;
    justify-content: space-around;
    padding: 5px 0;
}

.date span {
    width: 100px;
}

.date span:first-child {
    text-align: left;
}

.date span:last-child {
    text-align: right;
}

.date .oct-21 {
    color: #1F386E;
    font-size: 15px;
}

.show-name {
    color: #1F386E;
    font-family: "Ubuntu";
    font-size: 30px;
}

.show-name h1 {
    color: #1F386E;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-bottom: 10px;
}

.time {
    color: #1F386E;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    padding: 10px 0;
    text-align: center;
}

.time span {
    color: gray;
    font-weight: 400;

}

.left .time {
    font-size: 16px;
}

.location {
    align-items: center;
    border-top: 1px solid gray;
    display: flex;
    justify-content: space-around;
    padding-bottom: 20px;
    padding-top: 8px;
    width: 100%;
}

.location .separator {
    font-size: 20px;
}

.right {
    border-left: 5px dashed #404040;
    width: 180px;

}

.right .admit-one {
    color: darkgray;
}

.right .admit-one span:nth-child(2) {
    color: gray;
}

.right .right-info-container {

    display: flex;
    flex-direction: column;
    height: 250px;
    justify-content: space-around;
    padding: 25px 10px 10px 35px;
}

.right .show-name h1 {
    font-size: 18px;
    left: 0px;
    line-height: 0px;

}

.rofi {
    background-image: url("https://drive.google.com/uc?id=1YgqYUxv6NjciPZOLiP7sxVjTGLcJ9RDm");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 40px;
    height: 99px;
    opacity: 0.85;
    position: relative;
    top: 0.5px;
    width: 130px;
}

.right .ticket-number {
    align-items: center;
    bottom: 30px;
    font-size: 14px;
    left: 30px;
    position: relative;

}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head><body><div class="ticket">
    <div class="left">
        <div class="image">
            <p class="admit-one">
                <span>ADMIT ONE</span>
                <span>ADMIT ONE</span>
                <span>ADMIT ONE</span>
            </p>
        </div>
        <div class="ticket-info">
            <p class="date">
                <span>Friday</span>
                <span class="oct-21">October 21st</span>
                <span>2022</span>
            </p>
            <div class="show-name">
                <h1>001></h1>
                <h2>Ticket Number</h2>
            </div>
            <div class="time">
                <p>7:00 AM <span>TO</span> 4:00 PM</p>
                <p>Registration <span>@</span> 7:00 AM</p>
                <p>Shotgun Tee-off <span>@</span> 8:00 AM</p>
            </div>
            <p class="location"><span>Mt. Malarayat Golf &amp; Country Club Lipa Batangas</span>
        </p></div>
    </div>
    <div class="right">
        <p class="admit-one">
            <span>ADMIT ONE</span>
            <span>ADMIT ONE</span>
            <span>ADMIT ONE</span>
        </p>
        <div class="right-info-container">
            <div class="show-name">
                <h1>For inquiries</h1>
            </div>
            <div class="time">
                <p>Contact us at</p>
                <p>09178804200 rofi@rayomar.com.ph</p>
            </div>
            <div class="rofi"></div>
        </div>
        <div class="ticket-number">
            <p> Save this ticket and present at the booth</p>
        </div>
    </div>
</div><script>// Write JavaScript here </script></body>
</html>

Google Apps Script代码

function sendMailEdit(){
     var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
     var lastRow     = spreadsheet.getLastRow();
     var ticketNumber = spreadsheet.getRange(lastRow, 1).getValue();
     var email = spreadsheet.getRange(lastRow, 3).getValue();
     var ticketTrigger = spreadsheet.getRange(lastRow, 4).getValue();

     if (ticketTrigger == "Yes") {
        var htmlBody = HtmlService.createHtmlOutputFromFile('index').getContent();

        MailApp.sendEmail(email, "Test", htmlBody, {htmlBody: htmlBody});
  }
}

相关表格截图

表格截图

解决方案

1. 修复ticketNumber变量传递问题

当前代码无法将ticketNumber传入HTML模板，因为HtmlService.createHtmlOutputFromFile不支持变量替换，需改用模板渲染方式：

修改HTML模板中对应位置：将<h1>001></h1>替换为<h1><?= ticketNumber ?></h1>
修改Google Apps Script中的代码，替换获取HTML内容的部分：

// 原代码
var htmlBody = HtmlService.createHtmlOutputFromFile('index').getContent();

// 修改后
var template = HtmlService.createTemplateFromFile('index');
template.ticketNumber = ticketNumber;
var htmlBody = template.evaluate().getContent();

2. 修正`sendEmail`参数问题

MailApp.sendEmail的第三个参数是纯文本备选正文，若传入HTML内容可能导致邮件解析异常，建议设为纯文本说明：

// 原代码
MailApp.sendEmail(email, "Test", htmlBody, {htmlBody: htmlBody});

// 修改后
MailApp.sendEmail(email, "Test", "请使用支持HTML的邮件客户端查看此邮件", {htmlBody: htmlBody});

3. 排查触发条件与邮箱有效性

确认表格中ticketTrigger列的值是否严格等于"Yes"（注意大小写、空格）
验证目标邮箱是否正确，是否将邮件拦截至垃圾邮件文件夹
可添加日志输出，确认代码是否进入条件分支：

if (ticketTrigger == "Yes") {
  console.log("触发邮件发送，目标邮箱：" + email + "，票号：" + ticketNumber);
  // 后续邮件发送代码
} else {
  console.log("未满足触发条件，ticketTrigger值为：" + ticketTrigger);
}

4. 邮件CSS兼容性优化

部分邮件客户端不支持@import引入字体，建议将字体样式直接内联或替换为系统安全字体，避免样式失效。

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

如何通过审批流程发送HTML邮件？代码执行正常但未收到邮件

相关代码 #

HTML模板代码 #

Google Apps Script代码 #

相关表格截图 #

1. 修复ticketNumber变量传递问题 #

2. 修正sendEmail参数问题 #

3. 排查触发条件与邮箱有效性 #

4. 邮件CSS兼容性优化 #