如何为SMTP.js发送的旅行预订确认邮件添加样式与表格？

SMTP.js支持发送HTML格式的邮件，所以你完全可以给邮件内容加上自定义样式和表格，让确认邮件更专业美观。下面是具体的实现步骤和代码示例：

核心要点 #

• 邮件内容需使用HTML格式，而非纯文本
• 邮件客户端对CSS的支持有限，优先使用内联样式（避免外部CSS或<style>标签的部分属性不生效）
• 用模板字符串（反引号）来拼接动态变量和HTML内容，方便插入预订信息

完整代码示例 #

把你原来的Body部分替换成下面的HTML内容即可：

Email.send({ 
  Host: "smtp.gmail.com", 
  Username: "trippyadive.web.app@gmail.com", 
  Password: "xxxxxxxxxx", 
  To: email, 
  From: "trippyadive.web.app@gmail.com", 
  Subject: "Your Trip Booking Confirmation", 
  Body: `
    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #eee; border-radius: 8px;">
      <h2 style="color: #2c3e50; text-align: center; margin-bottom: 20px;">Trip Booking Confirmation</h2>
      <p>Hi ${name},</p>
      <p>Thank you for booking with Trippyadive! Your reservation details are listed below:</p>
      
      <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
        <thead>
          <tr style="background-color: #f8f9fa;">
            <th style="border: 1px solid #ddd; padding: 12px; text-align: left; color: #2c3e50;">Booking Details</th>
            <th style="border: 1px solid #ddd; padding: 12px; text-align: left; color: #2c3e50;">Information</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="border: 1px solid #ddd; padding: 12px; font-weight: bold;">Travel Package</td>
            <td style="border: 1px solid #ddd; padding: 12px;">${packageFields}</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 12px; font-weight: bold;">Booked By</td>
            <td style="border: 1px solid #ddd; padding: 12px;">${name}</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 12px; font-weight: bold;">Total Persons</td>
            <td style="border: 1px solid #ddd; padding: 12px;">${persons} (including ${name})</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 12px; font-weight: bold;">Travel Date</td>
            <td style="border: 1px solid #ddd; padding: 12px;">${date}</td>
          </tr>
        </tbody>
      </table>

      <p style="color: #e74c3c; font-weight: bold; margin-top: 20px;">Important Reminder:</p>
      <p>Your booking is currently provisional. Your seat will be fully confirmed once you complete the payment of the Security Deposit.</p>
      
      <p>Feel free to reach out to our support team if you have any questions!</p>
      <p>Best regards,<br>The Trippyadive Team</p>
    </div>
  `,
})

注意事项 #

• 兼容性：部分邮件客户端（比如Outlook）对CSS的支持有限，尽量避免使用复杂选择器、浮动或定位，优先用内联样式保证显示效果
• 测试：发送测试邮件到不同邮箱（Gmail、Outlook、QQ邮箱等），确认样式和表格在各客户端的显示一致
• 安全提示：确保packageFields、name等变量的值是合法的，对特殊字符（比如<、>）进行转义，避免HTML注入风险

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