如何使用EJS注入数据后生成HTML文件并完成本地/AWS S3存储

首先安装基础依赖：
npm install ejs
后续对接S3时可额外安装@aws-sdk/client-s3，当前本地存储阶段不需要额外依赖。

流程对应操作步骤 #

1. 存放原始HTML文件 #

• 新建source-html目录作为指定的HTML存放文件夹，把所有原始静态HTML文件全部放入该目录，文件结构、标签、样式不需要做任何修改。

2. 转换为EJS模板文件 #

• 新建ejs-templates目录专门存放模板文件，把需要动态填充数据的HTML文件复制到该目录，将后缀改为.ejs即可完成基础转换。
• 仅在需要插入动态数据的位置添加EJS语法标记，其余原有静态内容完全保留，就能保证最终生成的HTML结构和原文件完全一致。模板示例如下：

<!-- demo.ejs 由原demo.html修改而来 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title><%= pageTitle %></title>
  <style>/* 原有样式全部保留不修改 */</style>
</head>
<body>
  <!-- 原有静态标签全部保留不修改 -->
  <h1><%= mainTitle %></h1>
  <div class="list-wrap">
    <% dataList.forEach(item => { %>
      <div class="list-item"><%= item.content %></div>
    <% }) %>
  </div>
</body>
</html>

3. 注入业务数据完成渲染 #

• 新建渲染脚本（比如命名为render.js），引入ejs和Node.js内置的fs、path模块，读取EJS模板内容后传入业务数据调用渲染方法，核心代码如下：

const ejs = require('ejs');
const fs = require('fs');
const path = require('path');

// 路径配置
const templatePath = path.resolve(__dirname, './ejs-templates/demo.ejs');
const outputPath = path.resolve(__dirname, './output/demo.html');

// 待插入的业务数据，直接传入对应结构的对象即可
const bizData = {
  pageTitle: '业务数据统计页',
  mainTitle: '2024年Q3运营数据',
  dataList: [
    { content: '季度总营收：1280万元' },
    { content: '新增用户：3.2万人' },
    { content: '复购率：28.7%' }
  ]
};

// 读取模板并执行渲染
const templateStr = fs.readFileSync(templatePath, 'utf-8');
// renderedHtml 就是填充完所有数据的完整HTML字符串
const renderedHtml = ejs.render(templateStr, bizData);

如果需要批量渲染多个模板，循环遍历模板目录下的所有.ejs文件，重复上述读取+渲染逻辑即可。

4. 本地存储生成的HTML #

• 提前新建输出目录output，直接用fs模块把渲染得到的HTML字符串写入对应路径即可完成本地存储：

// 写入本地文件
fs.writeFileSync(outputPath, renderedHtml, 'utf-8');

• 后续需要上传到AWS S3时，不需要修改前面的渲染逻辑，直接将renderedHtml作为文件体调用S3的上传接口即可。

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