如何在用于邮件发送的.ejs文件中渲染HTML文件？

问题根源 #

你当前的代码只是将EJS文件当作普通文本读取并做字符串替换，没有使用EJS引擎编译模板，导致<% include %>这类EJS语法完全不会被解析，自然无法加载header.html的内容。

可行解决方案 #

要让EJS的include语法生效，必须通过EJS引擎渲染模板，而非手动处理文本。以下是具体步骤：

1. 确保安装EJS依赖
   如果项目中还没安装EJS，执行命令：

   npm install ejs
   

2. 修改EJS模板的include语法
   新版本EJS推荐使用<%- include(路径) %>语法（<%-用于输出原始HTML，避免标签被转义），更新你的index.ejs：

   <!DOCTYPE html>
   <html>
     <head>
       <title>My Web Page</title>
     </head>
     <body>
       <%- include('./header.html') %>
       <h1>Welcome to My Web Page, <%= name %></h1>
     </body>
   </html>
   

   由于index.ejs和header.html在同一目录，使用./header.html作为路径即可。

3. 重构邮件发送代码
   使用EJS的renderFile方法（支持异步/await）来编译模板，自动处理include和变量替换，替代手动的文件读取和字符串替换：

   const ejs = require('ejs');
   const fs = require('fs').promises;
   
   async function sendEmails(winningCampaigns) {
     try {
       // 渲染EJS模板，传入需要替换的变量
       const html = await ejs.renderFile('backend/views/index.ejs', { name: 'John Doe' });
       
       for (let campaign of winningCampaigns) {
         await sendEmail({
           to: "jcasasmail@gmail.com",
           subject: "Hello ✔",
           html: html
         });
       }
     } catch (err) {
       console.error('邮件发送失败:', err);
       throw err;
     }
   }
   

关键说明 #

• ejs.renderFile会自动解析模板中的所有EJS语法，包括include，将header.html的内容嵌入到index.ejs的对应位置。
• 使用<%= name %>替代手动的字符串替换，EJS会自动将变量值插入模板，更安全且易维护。
• <%-和<%=的区别：<%-用于输出HTML内容（避免转义），<%=用于输出普通文本（自动转义特殊字符），加载HTML片段必须用<%-。

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