如何在Express中使用sendFile向HTML文件传递JSON数据（非Ajax及视图引擎方案）

嘿，我懂你的情况——刚上手Express，不想折腾视图引擎，就想用res.sendFile托管你的index.html，还得把CSV解析出来的JSON数据传给前端对吧？除了AJAX和模板引擎，确实有几个实用的办法，我给你一一拆解：

1. 通过查询字符串传递（适合小体量数据） #

把JSON数据转成字符串并编码后，拼在HTML文件的URL后面，前端加载页面时从URL里提取解析。

服务器代码示例 #

const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const csv = require('csv-parser'); // 这里用csv-parser做CSV解析，你也可以换其他库

app.get('/', (req, res) => {
  let csvData = [];
  // 解析CSV文件
  fs.createReadStream('your-data.csv')
    .pipe(csv())
    .on('data', (row) => csvData.push(row))
    .on('end', () => {
      // 把JSON转成字符串并URL编码，避免特殊字符问题
      const encodedData = encodeURIComponent(JSON.stringify(csvData));
      // 重定向到带查询参数的HTML路由
      res.redirect(`/page?csvData=${encodedData}`);
    });
});

// 托管index.html的路由
app.get('/page', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

前端（index.html）代码 #

window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const rawData = urlParams.get('csvData');
  if (rawData) {
    // 解码并解析成JSON
    const csvData = JSON.parse(decodeURIComponent(rawData));
    console.log('拿到的CSV数据:', csvData);
    // 这里就可以用数据做渲染了
  }
});

⚠️ 注意：查询字符串有长度限制（不同浏览器略有差异，一般在2KB-8KB之间），所以只适合数据量小的场景。

2. 动态嵌入数据到HTML中（适合中等数据量） #

这个方法是先读取HTML文件内容，把数据作为全局变量插入到页面的<script>标签里，再把修改后的HTML返回给前端——虽然不是直接用res.sendFile，但本质还是返回静态HTML文件，只是提前注入了数据。

服务器代码示例 #

app.get('/', (req, res) => {
  let csvData = [];
  fs.createReadStream('your-data.csv')
    .pipe(csv())
    .on('data', (row) => csvData.push(row))
    .on('end', () => {
      // 读取index.html的原始内容
      fs.readFile(path.join(__dirname, 'index.html'), 'utf8', (err, htmlContent) => {
        if (err) return res.status(500).send('读取HTML文件失败');
        
        // 在HTML中嵌入全局变量，你可以提前在HTML里留个占位注释
        const injectedHtml = htmlContent.replace(
          '<!-- CSV_DATA_INJECT -->',
          `<script>window.csvData = ${JSON.stringify(csvData)};</script>`
        );
        // 返回修改后的HTML
        res.send(injectedHtml);
      });
    });
});

前端（index.html）代码 #

<body>
  <!-- 留个占位，让服务器替换成数据脚本 -->
  <!-- CSV_DATA_INJECT -->

  <script>
    // 页面加载时直接用全局变量window.csvData
    console.log('嵌入的CSV数据:', window.csvData);
  </script>
</body>

这个方法不需要前端发额外请求，页面加载完成就能拿到数据，而且没有查询字符串的长度限制，适合中等体量的数据。

3. 通过Cookie传递数据（适合非敏感小数据） #

把JSON数据转成字符串后存在Cookie里，前端从浏览器的Cookie中读取并解析。

服务器代码示例 #

app.get('/', (req, res) => {
  let csvData = [];
  fs.createReadStream('your-data.csv')
    .pipe(csv())
    .on('data', (row) => csvData.push(row))
    .on('end', () => {
      const dataStr = JSON.stringify(csvData);
      // 设置Cookie，httpOnly设为false让前端能读取
      res.cookie('csvData', dataStr, { 
        maxAge: 900000, // Cookie有效期15分钟
        httpOnly: false,
        secure: false // 开发环境用false，生产环境HTTPS下改true
      });
      // 发送HTML文件
      res.sendFile(path.join(__dirname, 'index.html'));
    });
});

前端（index.html）代码 #

window.addEventListener('load', () => {
  // 从Cookie中提取数据
  const cookieEntry = document.cookie.split('; ').find(item => item.startsWith('csvData='));
  if (cookieEntry) {
    const rawData = cookieEntry.split('=')[1];
    const csvData = JSON.parse(rawData);
    console.log('从Cookie拿到的数据:', csvData);
  }
});

⚠️ 注意：单Cookie大小限制在4KB左右，而且httpOnly: false会有XSS风险，所以只适合非敏感的小数据。

4. 用Session存储数据（适合大数据/敏感数据） #

如果数据量比较大或者需要安全存储，可以用Express的Session把数据存在服务器端，前端通过一个简单的接口获取数据——这个方法虽然需要前端发一次请求，但不需要提前把数据暴露在URL或HTML里。

服务器代码示例 #

首先需要安装express-session：

npm install express-session

然后配置Session并编写路由：

const session = require('express-session');

// 配置Session
app.use(session({
  secret: 'your-own-secret-key', // 随便写个密钥，生产环境要保密
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false } // 开发环境用false，生产环境HTTPS下改true
}));

app.get('/', (req, res) => {
  let csvData = [];
  fs.createReadStream('your-data.csv')
    .pipe(csv())
    .on('data', (row) => csvData.push(row))
    .on('end', () => {
      // 把数据存在Session里
      req.session.csvData = csvData;
      // 发送HTML文件
      res.sendFile(path.join(__dirname, 'index.html'));
    });
});

// 前端用来获取数据的接口
app.get('/api/get-csv-data', (req, res) => {
  if (req.session.csvData) {
    res.json(req.session.csvData);
    // 可以用完后删除Session里的数据，避免占用内存
    delete req.session.csvData;
  } else {
    res.status(404).json({ message: '数据不存在' });
  }
});

前端（index.html）代码 #

window.addEventListener('load', async () => {
  try {
    const response = await fetch('/api/get-csv-data');
    const csvData = await response.json();
    console.log('从Session拿到的数据:', csvData);
  } catch (err) {
    console.error('获取数据失败:', err);
  }
});

这个方法适合数据量较大的场景，而且数据存在服务器端，相对安全，不会暴露给用户。

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