如何向引入的EJS模板传递数据？附main.js代码示例

嘿，我来帮你搞定这个问题！你现在的代码里，showTemplate函数只是单纯加载了EJS模板的文件路径，但并没有把data对象里的内容传递给模板——这就是问题所在。下面给你两种实用的解决方案，选哪种看你的需求：

方案一：在主进程预渲染EJS为HTML（最直接） #

这种方法是在main.js所在的主进程里，先把EJS模板和数据结合渲染成完整的HTML，再加载到窗口里，步骤如下：

1. 先安装EJS依赖 #

在项目根目录运行：

npm install ejs

2. 修改你的showTemplate函数 #

首先要引入必要的模块，然后修改函数逻辑：

const ejs = require('ejs');
const fs = require('fs');
const path = require('path');
// 确保你已经引入了BrowserWindow等Electron模块

function showTemplate(template, data) {
  // 拼接完整的模板文件路径
  const templateFullPath = path.join(__dirname, APP.TemplatesPath, template);
  // 读取EJS模板的内容
  const templateContent = fs.readFileSync(templateFullPath, 'utf8');
  
  // 用EJS渲染模板，把data里的变量注入进去
  const renderedHtml = ejs.render(templateContent, data);
  
  // 将渲染好的HTML通过data URL加载到窗口
  mainWindow.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(renderedHtml)}`);
}

3. 在EJS模板里使用变量 #

比如你的Account.ejs模板可以这么写，直接用你传入的accounts、currencies、a变量：

<div class="account-list">
  <h2>我的账户列表</h2>
  <% accounts.forEach(account => { %>
    <div class="account-item">
      <span>账户名：<%= account.name %></span>
      <span>货币：<%= currencies[account.currencyId].name %></span>
    </div>
  <% }) %>
  <p>测试变量：<%= a %></p>
</div>

这样修改后，当你调用showTemplate时，数据就会被注入到模板里，渲染出带内容的HTML页面了。

方案二：通过IPC通信在渲染进程传递数据 #

如果你想把数据传递到渲染进程，再由渲染进程处理EJS渲染，可以这么做：

1. 修改主进程的showTemplate函数 #

function showTemplate(template, data) {
  const templateUrl = url.format({
    pathname: path.join(__dirname, APP.TemplatesPath, template),
    protocol: 'file:',
    slashes: true
  });
  
  // 先加载模板文件
  mainWindow.loadURL(templateUrl);
  
  // 等待页面加载完成后，通过IPC发送数据
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('template-data', data);
  });
}

2. 在渲染进程接收数据并渲染 #

在你的EJS模板里添加一段脚本（或者单独引入JS文件），接收IPC数据并渲染：

<!-- Account.ejs -->
<div id="render-target"></div>
<!-- 模板内容可以放在script标签里，或者直接写在目标容器外 -->
<script type="text/ejs" id="account-template">
  <h2>我的账户列表</h2>
  <% accounts.forEach(account => { %>
    <div class="account-item">
      <span>账户名：<%= account.name %></span>
      <span>货币：<%= currencies[account.currencyId].name %></span>
    </div>
  <% }) %>
  <p>测试变量：<%= a %></p>
</script>

<script>
  const { ipcRenderer } = require('electron');
  const ejs = require('ejs');

  // 接收主进程发送的数据
  ipcRenderer.on('template-data', (event, data) => {
    // 获取模板内容
    const templateContent = document.getElementById('account-template').innerHTML;
    // 渲染模板
    const renderedHtml = ejs.render(templateContent, data);
    // 插入到页面容器里
    document.getElementById('render-target').innerHTML = renderedHtml;
  });
</script>

这种方法适合需要在渲染进程里做更多交互逻辑的场景。

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