Laravel发送自定义HTML邮件时类与ID被加x_前缀及UTC转本地时间问题

问题1：Class/ID自动添加x_前缀 #

原因 #

Laravel邮件组件默认会给HTML中的class和id加上x_前缀，用来避免邮件客户端自带样式和自定义样式冲突，这个机制在使用Markdown邮件模板时会自动触发。

解决办法 #

• 如果你的邮件类继承自Mailable，直接在类里添加一行属性：

  protected $cssPrefix = '';
  

  或者在build()方法里调用禁用前缀的方法：

  public function build()
  {
      return $this->withoutCssPrefix()
                  ->view('emails.your-template-name');
  }
  

• 如果你是直接发送纯HTML内容，不要用markdown()方法，改用html()方法渲染模板：

  public function build()
  {
      $html = view('emails.your-template-name')->render();
      return $this->html($html);
  }
  

问题2：UTC日期转用户本地时间（含前缀对JS的影响） #

前提 #

必须先解决前缀问题，否则JS里用原ID获取元素会失败——因为ID会被改成x_expiry_date_txt这类带前缀的名称。

实现步骤 #

1. 把后端的UTC日期传递给JS：利用Carbon实例的toISOString()方法，输出带UTC信息的标准格式字符串。
2. 在JS中把UTC字符串转成用户本地时区的日期，并格式化输出。

修改模板中的脚本部分为：

<script>
    // 更新版权年份
    document.getElementById("copyright").appendChild(document.createTextNode(new Date().getFullYear()));
    
    // 处理过期日期转换
    const utcExpiryDate = "{{ $subscription->end_date->toISOString() }}";
    const expiryDateElement = document.getElementById("expiry_date_txt");
    const localExpiryDate = new Date(utcExpiryDate);
    
    // 格式化为dd/mm/yyyy，可根据需求调整选项
    const formattedDate = localExpiryDate.toLocaleDateString('en-GB', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric'
    });
    
    expiryDateElement.innerText = formattedDate;
</script>

格式自定义说明 #

如果需要带时分的格式，修改toLocaleString的参数即可：

const formattedDateTime = localExpiryDate.toLocaleString('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
});

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