如何在网页中正确读取本地 DAT 文件：Node.js 与浏览器环境的关键区别-html教程-PHP中文网

如何在网页中正确读取本地 DAT 文件：Node.js 与浏览器环境的关键区别

本文详解为何直接将 Node.js 文件读取代码（如 fs.readFileSync）嵌入 HTML 会导致失败，并提供适用于浏览器的替代方案（如 fetch + FileReader），同时指出常见语法隐患与工程化实践建议。

本文详解为何直接将 node.js 文件读取代码（如 `fs.readfilesync`）嵌入 html 会导致失败，并提供适用于浏览器的替代方案（如 `fetch` + `filereader`），同时指出常见语法隐患与工程化实践建议。

你遇到的问题并非代码逻辑错误，而是运行环境的根本性错配：你所写的 JavaScript 代码（含 require('fs')、path.join()、fs.readFileSync()）是专为 Node.js 服务端/桌面环境设计的，而标准浏览器（Chrome、Firefox 等）出于严格的安全沙箱机制，完全禁止直接访问本地文件系统。因此，当这段代码被放入 <script></script> 标签并由浏览器执行时，会立即抛出 ReferenceError: require is not defined 或 Uncaught TypeError: fs.readFileSync is not a function 等错误——这正是“在 JS 环境中能跑，放到 HTML 里就失败”的根本原因。

✅ 正确的浏览器端解决方案

浏览器中读取本地 .dat 文件需采用用户主动授权 + 安全 API 的方式，主流方案有两种：

方案一：通过 `<input type="file">` 由用户选择文件（推荐用于开发/内部工具）

<input type="file" id="scheduleInput" accept=".dat"><div id="result"></div>

<script>
document.getElementById('scheduleInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const text = await file.text(); // 读取为字符串（UTF-8）
  const lines = text.split(/\r?\n/);
  let reikailist = '';

  for (const line of lines) {
    if (!line.trim()) continue;
    const parts = line.split('######');
    if (parts.length > 0) {
      // 假设日期字段在 parts[0]，按需解析（如 YYYYMMDD 格式）
      const dateStr = parts[0].trim();
      if (/^\d{8}$/.test(dateStr)) {
        reikailist += `${dateStr}:`;
      }
    }
  }

  // 移除末尾多余的冒号（注意：原代码 slice(0,-9) 有逻辑风险，应改为更安全的处理）
  document.getElementById('result').textContent = 
    reikailist ? reikailist.slice(0, -1) : '无有效日期';
});
</script>

方案二：通过 `fetch()` 加载同源服务器上的 DAT 文件（适用于部署环境）

async function readschedule() {
  try {
    const response = await fetch('./schedule/schedule.dat'); // 路径需相对于 HTML 文件
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const text = await response.text();
    const lines = text.split(/\r?\n/);
    const dates = [];

    lines.forEach(line => {
      const [datePart] = line.split('######');
      if (/^\d{4}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])$/.test(datePart.trim())) {
        dates.push(datePart.trim());
      }
    });

    return dates.join(':');
  } catch (err) {
    console.error('读取 schedule.dat 失败:', err);
    return '';
  }
}

// 使用示例
readschedule().then(result => {
  console.log('解析结果:', result);
  // 可在此处更新通知栏或调用 dayoftheweek()
});

⚠️ 必须修正的代码隐患（无论环境）

你原始代码中存在多个影响健壮性的低级问题，务必整改：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

全局变量污染：date、reiday、reikailist 等未用 let/const 声明 → 改为 let reiday = ''; const reikailist = [];
危险的字符串拼接截断：slice(0, -9) 依赖固定长度，极易出错 → 改用数组 push() + join(':')
注释语法错误：/// 是非法注释（应为 // 或 /* */）
缺少错误处理：Node.js 中 fs.readFileSync 可能因路径错误崩溃，浏览器中 fetch 必须 try/catch