如何将 HTML 文件输入转换为 ReadableStream 进行流式处理-js教程-PHP中文网

如何将 HTML 文件输入转换为 ReadableStream 进行流式处理

本文介绍如何通过 HTML 获取用户选择的文件，并直接将其转换为 ReadableStream，实现大文件（如 3GB 日志）的内存友好型逐块读取与行解析，避免一次性加载导致的内存溢出。

本文介绍如何通过 html `` 获取用户选择的文件，并直接将其转换为 `readablestream`，实现大文件（如 3gb 日志）的内存友好型逐块读取与行解析，避免一次性加载导致的内存溢出。

在前端处理大型日志文件（例如数 GB 的文本日志）时，传统方式如 FileReader.readAsText() 或 file.text() 会将整个文件加载进内存，极易引发浏览器卡顿甚至崩溃。而现代浏览器（Chrome 84+、Firefox 105+、Safari 16.4+）已原生支持 File.prototype.stream() 方法——它返回一个标准 ReadableStream，使你能够以流式、增量、低内存占用的方式读取文件内容。

✅ 核心实现：从获取 ReadableStream

只需三步即可完成初始化：

<input type="file" id="logFileInput" accept=".log,.txt">

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

  // ? 关键：调用 file.stream() 得到 ReadableStream
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder('utf-8');

  // 可选：用于进度计算
  const totalSize = file.size;
  let bytesRead = 0;

  try {
    let buffer = ''; // 缓存跨 chunk 的不完整行
    const newlineRegex = /\r?\n/g;

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      bytesRead += value.length;
      const chunk = decoder.decode(value, { stream: true });
      buffer += chunk;

      let match;
      newlineRegex.lastIndex = 0;
      while ((match = newlineRegex.exec(buffer)) !== null) {
        const line = buffer.slice(0, match.index);
        buffer = buffer.slice(match.index + match[0].length);

        // ✅ 在此处处理每一行日志（例如匹配错误、提取时间戳等）
        console.log('Parsed line:', line.trim());
      }
    }

    // 处理最后一行（无换行符结尾）
    if (buffer.trim()) {
      console.log('Final line:', buffer.trim());
    }
  } finally {
    reader.releaseLock();
  }
});

⚠️ 注意事项与最佳实践

编码兼容性：TextDecoder 默认使用 utf-8，若日志为 GBK、ISO-8859-1 等编码，需后端预转换或使用 encoding-api polyfill（注意：TextDecoder 不支持所有编码，且 stream: true 仅对 utf-8 完全可靠）；
错误处理：务必包裹 reader.read() 在 try/catch 中，并始终调用 reader.releaseLock()（尤其在异常退出时），否则后续读取将被阻塞；
性能提示：避免在 while 循环中频繁拼接长字符串（如 buffer += chunk）。对超大文件，可考虑使用 Uint8Array 缓冲区 + TextDecoder.decode() 分段解码，或引入 TransformStream 构建更健壮的行分割器；
兼容性兜底：旧版浏览器不支持 file.stream()，可通过 if ('stream' in File.prototype) 检测，并降级为分块 slice() + FileReader（但失去真正流式优势）。

? 扩展建议：封装为可复用的行迭代器

参考 MDN 模式，可将上述逻辑抽象为异步生成器函数，提升复用性：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

async function* fileLineIterator(file: File): AsyncGenerator<string void unknown> {
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder('utf-8');
  let buffer = '';

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buffer += decoder.decode(value, { stream: true });

      let i = 0;
      for (let pos = buffer.indexOf('\n', i); pos !== -1; pos = buffer.indexOf('\n', i)) {
        yield buffer.slice(i, pos).replace(/\r$/, '');
        i = pos + 1;
      }
      buffer = buffer.slice(i);
    }
    if (buffer) yield buffer;
  } finally {
    reader.releaseLock();
  }
}

// 使用示例：
for await (const line of fileLineIterator(file)) {
  if (/ERROR|FATAL/.test(line)) {
    console.warn('Found critical log:', line);
  }
}</string>

通过 file.stream()，你无需服务端代理或 Blob URL 中转，即可在纯前端实现高性能、低内存的日志流式分析——这是现代 Web API 赋予前端工程师处理大数据的关键能力之一。