修复 FreeMarker 电子邮件模板显示问题

修复 FreeMarker 电子邮件模板显示问题
修复 FreeMarker 电子邮件模板显示问题
Isanes Francois
2024年5月14日星期二 下午10:44:31

使用 FreeMarker 了解电子邮件样式

使用 FreeMarker 模板生成电子邮件内容时，期望模板中的 HTML 和 CSS 将在电子邮件客户端中正确呈现。但是，当电子邮件显示原始 HTML 和 CSS 代码而不是样式内容时，可能会出现问题。这通常是意想不到的，并且可能有损电子邮件的专业外观。

当电子邮件客户端（例如 Microsoft Outlook）无法正确解释通过 FreeMarker 处理的模板发送的 HTML 和 CSS 时，通常会出现此问题。这里的核心问题涉及确保电子邮件客户端可以按预期解析和显示 HTML，将 CSS 样式正确应用到运行时填充的动态内容。

命令 描述
MimeMessageHelper Spring 框架中用于创建 MIME 电子邮件消息的实用程序类。它支持多部分消息，允许将图像和附件等元素与文本一起嵌入。
processTemplateIntoString() Spring 的 FreeMarker 实用程序中的一种方法，通过将模板（作为 FreeMarker 模板加载）与给定的模型映射合并来将模板（作为 FreeMarker 模板加载）处理为字符串。
ClassPathResource Spring 的资源加载器提供了用于访问类路径中的资源的简单抽象。它在这里用于加载嵌入在应用程序中的 HTML 文件。
Jsoup.parse() Jsoup 库中的方法，将包含 HTML 的字符串解析为可管理的 Document 对象，从而允许操作 HTML 元素和属性。
select() Jsoup 方法使用类似 CSS 查询的语法从 Document 对象中选择元素，这对于操作 HTML 文档的特定部分非常有用。
attr() Jsoup 方法检索或设置 HTML 元素的属性值，此处用于直接向元素动态添加 CSS 样式。

使用 FreeMarker 和 Spring 解释电子邮件模板流程

提供的脚本旨在促进使用 FreeMarker 模板引擎和 Spring 电子邮件服务创建和发送样式化 HTML 电子邮件。第一个脚本将 Spring 配置为使用 FreeMarker 生成电子邮件内容。它首先注入 FreeMarkerConfigurer 和 JavaMailSender 通过春天的 @Autowired 注解。此设置确保应用程序可以根据模板动态生成电子邮件内容并发送它们。这 getTemplate 方法从指定目录加载电子邮件模板，然后填充用户名和地址等模型数据，使用以下命令将模板转换为准备发送的 HTML 字符串 processTemplateIntoString。

第二个脚本侧重于通过将 CSS 样式直接内联到 HTML 中来增强电子邮件外观。利用 Jsoup 为了解析 HTML 内容，它允许操作文档的结构和样式。这 parse 方法将 HTML 字符串转换为可遍历和操作的文档对象。这 select 方法用于定位 CSS 元素并使用以下方法将样式直接应用到相应的 HTML 元素 attr 方法。此过程可确保样式嵌入电子邮件的 HTML 中，从而增强与 Microsoft Outlook 等可能不完全支持外部或内部 CSS 的电子邮件客户端的兼容性。

解决通过 FreeMarker 发送的电子邮件中的 HTML 显示问题

Java 和 Spring 框架配置

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer;
import freemarker.template.Template;
import java.util.Map;
import java.util.HashMap;
import java.nio.charset.StandardCharsets;
import javax.mail.internet.MimeMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;
@Service
public class EmailService {
    @Autowired
    private JavaMailSender mailSender;
    @Autowired
    private FreeMarkerConfigurer freemarkerConfigurer;
    public void sendEmail(Map<String, Object> model) throws Exception {
        Template template = freemarkerConfigurer.getConfiguration().getTemplate("emailTemplate.ftl");
        String html = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
        MimeMessage message = mailSender.createMimeMessage();
        MimeMessageHelper helper = new MimeMessageHelper(message, MimeMessageHelper.MULTIPART_MODE_MIXED_RELATED, StandardCharsets.UTF_8.name());
        helper.setTo("example@example.com");
        helper.setText(html, true);
        helper.setSubject("Testing from Spring Boot");
        mailSender.send(message);
    }
}

为 HTML 电子邮件内容实施 CSS 内联

Java 与 Spring Email 和 CSS 内联

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ClassPathResource;
import org.springframework.util.StreamUtils;
import java.nio.charset.StandardCharsets;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.mail.javamail.JavaMailSender;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
@Service
public class InlineCssEmailService {
    @Autowired
    private JavaMailSender mailSender;
    public void sendStyledEmail(Map<String, Object> model, String templatePath) throws Exception {
        String htmlContent = new String(StreamUtils.copyToByteArray(new ClassPathResource(templatePath).getInputStream()), StandardCharsets.UTF_8);
        Document document = Jsoup.parse(htmlContent);
        document.select("style").forEach(style -> {
            String css = style.data();
            document.select(style.attr("for")).attr("style", css);
        });
        MimeMessage message = mailSender.createMimeMessage();
        MimeMessageHelper helper = new MimeMessageHelper(message, true);
        helper.setTo("test@example.com");
        helper.setSubject("Styled Email Test");
        helper.setText(document.outerHtml(), true);
        mailSender.send(message);
    }
}

使用 HTML 内容增强电子邮件送达率

使用 FreeMarker 等模板时确保 HTML 电子邮件的可送达性需要了解电子邮件客户端兼容性的复杂性。许多电子邮件客户端（包括 Microsoft Outlook）在解析和显示 HTML 和 CSS 的方式上都有特定的怪癖。这些差异可能会导致电子邮件看起来与预期不同的问题，从而影响用户参与度和专业沟通。这一挑战强调了跨不同平台测试电子邮件设计以确保一致渲染的重要性。

CSS 内联等技术（其中样式直接嵌入 HTML 元素中，而不是外部链接或包含在文档的头部中）可以显着改善内容在限制性电子邮件客户端中的显示方式。此方法最大限度地减少了不支持某些 CSS 属性或忽略外部样式表的电子邮件客户端对样式的剥离，从而保留了电子邮件内容的预期设计。

电子邮件模板集成常见问题解答

  1. 为什么我的电子邮件显示 HTML 代码？
  2. 当电子邮件客户端由于 MIME 类型设置不正确或电子邮件发送配置中缺乏 HTML 支持而无法将 HTML 识别为内容时，通常会发生这种情况。
  3. 如何确保我的样式应用在 Outlook 中？
  4. 使用 CSS inlining 以确保 Outlook 不会删除样式，从而忽略外部样式或标题样式。
  5. 什么是 FreeMarker？
  6. FreeMarker 是一个模板引擎，用于基于模板生成文本输出，通常用于创建动态 HTML 电子邮件。
  7. 如何测试我的 HTML 电子邮件？
  8. 使用 Litmus 或 Email on Acid 等电子邮件测试工具在发送之前预览电子邮件在不同电子邮件客户端上的显示效果。
  9. 为什么我的电子邮件中没有显示图像？
  10. 这可能是由于电子邮件客户端默认阻止图像或 HTML 代码中引用图像的方式存在问题。

结束我们对模板渲染的讨论

使用 FreeMarker 模板应对电子邮件渲染的复杂性需要清楚地了解模板引擎和电子邮件客户端的功能。通过采用 CSS 内联和跨不同客户端进行细致测试等策略，开发人员可以显着改进电子邮件的显示方式。此外，理解和利用正确的 Spring 配置和 Java 类有助于发送满足设计期望的电子邮件，最终确保专业且引人入胜的用户体验。