块越大看得越多,但读取和渲染也越慢。
| 块大小 | 适合 | 体验 |
|---|---|---|
| 64 KB | 快速翻找、定位大致位置 | 极快,几乎无等待 |
| 256 KB | 日常查看日志、CSV(推荐) | 快,一次能看到足够内容 |
| 1 MB | 需要一次性看大量内容 | 略慢,行数上限调高时更明显 |
| 整个文件 | — | ❌ 不支持,会撑爆浏览器内存 |
⚠️ 使用提示:① 文件不会上传——全程用浏览器本地的 File API 分块读取,没有任何网络请求;② 本工具只读不写,不会修改你的原文件;③ 按字节偏移跳转时有可能落在某一行的中间(分块读取无法知道行边界),开头半行内容不完整是正常现象;④ 搜索只在当前已读取的块内进行,不是全文搜索;⑤ 行号显示的是当前块内的序号,不是整个文件的真实行号;⑥ 二进制文件(视频、压缩包)请切到「十六进制」模式,文本模式只会看到乱码;⑦ 超大文件频繁跳转时注意内存占用,看完请及时关闭页面。
服务器日志跑了一个月,2 GB;导出的 SQL 备份几个 G;同事发来的 CSV 有百万行——用记事本打开是转圈,用编辑器打开是崩溃。
问题在于这些工具都想把整个文件读进内存。而这个工具不这么干:
① 分块读取:一次只读你要看的那一块(默认 256 KB),所以文件多大都能秒开;
② 任意跳转:按字节偏移或百分比直接跳,配合上一块 / 下一块快速翻找;
③ 文本 / 十六进制双模式:日志、CSV 用文本,二进制文件切十六进制;
④ 编码可选:UTF-8 或 GBK,老系统导出的中文文件不再乱码;
⑤ 块内搜索:跳到大致位置后搜关键词,快速定位到具体那几行。
文件在你自己的浏览器里被分块读取,不上传、不修改、不留副本。
怎么实现:
① 核心是一行代码:file.slice(offset, offset + chunkSize)。`File` 对象本身只是一个「句柄」,不占内存;真正读数据时用 `slice` 取出需要的那一段,再 `arrayBuffer()`——所以 2 GB 的文件也只消耗几十 KB 到几 MB 内存;
② 解码:`new TextDecoder(encoding).decode(buffer)`,按 UTF-8 或 GBK 解码成字符串。GBK 是老系统导出文件的常见编码,浏览器内置支持;
③ 行处理:解码后按 \n 切分,只渲染前 N 行(可调),避免一次生成几万个节点;
④ 十六进制模式:不解码,直接按 16 字节一行渲染字节值 + 字符列,用于查看二进制文件;
⑤ 进度:当前偏移 ÷ 文件大小得到百分比,画在进度条上;
⑥ 搜索:只在已读取的块内查找匹配行,列出行号与上下文——不是全文搜索,这是分块读取的固有取舍。
它不做:不做全文搜索、不做编辑保存、不做行号精确映射(需要从头扫描整个文件才能算出真实行号,代价太高)。
File.slice(offset, offset + size) 实现分块读取(块大小 64 KB ~ 1 MB 可调),支持按字节偏移或百分比跳转、上一块 / 下一块翻页、文本 / 十六进制双模式与 UTF-8 / GBK 编码切换;显示文件大小、总块数、当前位置进度、读取耗时,并提供块内关键词搜索(列出命中行与上下文)。全程只读取所需片段,不整体载入、不上传、不修改。纯本地零依赖,适配黑夜模式。
grep / rg)或专业日志分析工具。审核通过后就会展示在留言板上,稍安勿躁~
还没有留言,来抢沙发吧!