梳理了除了JS和CSS之外，浏览器可以读取的本地文件格式。由于浏览器的安全限制，某些格式需要特定的技术或方法才能实现本地读取。
下面这个表格汇总了不同文件类型的支持情况和关键技术。
| 文件类别 | 具体格式 | 关键技术/方法 | 核心限制与说明 |
|---|---|---|---|
| 文档与办公文件 | PDF、Word(.doc/.docx)、Excel(.xls/.xlsx)、TXT | iframe嵌入、WASM解析、在线查看器 | WASM方案性能好但技术复杂；在线查看器（如Office Online）需网络。 |
| 图片 | PNG、JPG、GIF、SVG、WebP等 | <img>标签、File API | 可通过文件选择器读取，或直接通过相对路径引用。 |
| 音频与视频 | MP3、MP4、WebM等 | <audio>/<video>标签 | 可通过文件选择器读取，或直接通过相对路径引用。 |
| 字体文件 | TTF、OTF、WOFF等 | @font-face CSS规则 | 通常通过CSS直接引用。 |
💡 实现本地文件读取的关键方法
实现上述文件读取，主要依赖于以下几种技术和方法：
- 利用现代浏览器API：使用
FileReaderAPI或更新的 File System Access API，可以让用户通过文件选择器(<input type="file">)主动选择文件，然后由JavaScript读取内容。这是最通用且安全的方式。 - 借助特定技术处理复杂格式：对于PDF、Office等复杂二进制文件，纯JavaScript处理性能较差。WebAssembly (WASM) 技术可以将C++等语言编写的高性能解析库（如Poppler for PDF, Libxl for Excel）编译后在浏览器中运行，实现接近原生的解析速度。
- 通过嵌入与在线服务：使用
<iframe>标签可以直接嵌入PDF等文档。对于Office文件，可以借助 Microsoft Office在线查看器或 Google Docs 的嵌入功能实现预览，但这通常需要网络并将文件上传至第三方服务器。 - 注意安全限制：浏览器出于安全考虑，默认会限制通过JavaScript直接访问用户文件系统。你提到的通过Fetch API读取同目录下的
aa.txt文件失败，正是由于这个原因。使用文件选择器或通过本地服务器（如Live Server）运行项目，可以规避此问题。
🛠️ 如何选择适合的方案
你可以根据具体需求来选择合适的技术路径：
- 如果希望用户主动选择文件进行处理（如图片编辑器、文档查看器），File System Access API 配合 FileReader 是首选。
- 如果需要在网页中高性能地解析和预览复杂的办公文档（如PDF、Excel）且不希望依赖网络，WASM 是目前最强大的解决方案。
- 如果只是希望在页面中简单展示一个文档，并且不介意依赖网络，使用
<iframe>嵌入或在线查看器 是最快捷的方式。
希望以上信息能帮助你更好地规划你的项目。如果你能告诉我你具体想实现什么样的功能，我可以为你提供更具体的技术建议。