HTML导入（import）仅负责加载资源，不解析文件内容；解析需用fetch()或File API配合text()/json()/arrayBuffer()等方法及专用逻辑。
HTML导入（import）根本不能解析文件内容
HTML的<link rel="import">（已废弃）或现代import()动态导入，只负责加载资源，不提供任何文件解析能力。它既不会读取JSON、CSV、XML的结构，也不会帮你提取文本、转换编码或校验格式。所谓“用HTML导入解决文件解析”，是把加载和解析两个阶段混淆了。
常见错误现象：Failed to load module script、控制台显示HTML被当文本加载但后续JSON.parse()报错SyntaxError: Unexpected token <——这说明你试图直接解析一个未处理的HTML文档字符串。
-
<link rel="import" href="data.json">在Chrome 73+ 已彻底移除，且原生就不支持非HTML资源 -
import('./data.json')在多数打包环境（如Webpack/Vite）中需插件支持，原生ESM默认只认.js，直接写会报TypeError: Failed to resolve module specifier - 即使加载成功，得到的也是模块对象（如
{ default: {...} }），不是原始字符串，无法用fs.readFileSync或TextDecoder那一套流程
真正需要文件解析时该用什么API
浏览器环境下，文件解析必须依赖用户主动触发的输入（如<input type="file">）或fetch()获取原始响应体，再配合对应解析逻辑。
- 解析本地上传的JSON：
const file = e.target.files[0]; const json = await file.text().then(JSON.parse); - 解析CSV：用
file.text()得字符串后，手动按\n和,切分，或引入PapaParse库处理转义与换行 - 解析二进制文件（如图片头信息）：用
file.arrayBuffer()+new DataView(...)读取字节 - 注意
fetch('config.yaml')返回的是Response对象，必须调用response.text()或response.json()才真正解析；直接import()做不到这点
为什么有人误以为HTML导入能解析文件
早期部分开发者把<link rel="import">当作“万能资源加载器”，看到它能加载HTML片段，就推断也能加载并“理解”其他格式。实际上它只是把目标URL的内容作为HTML文档片段插入，对非HTML内容不做任何解释——比如加载data.xml，浏览器照样当成HTML解析，遇到<root>直接报Unknown element警告，内容也拿不到。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 历史包袱：
rel="import"设计初衷仅用于组件复用，规范从未定义对非HTML MIME类型的处理逻辑 - 打包工具误导：Webpack的
require('!raw-loader!./data.txt')或Vite的import txt from './data.txt?raw'看起来像“导入即解析”，但这是构建时转换，和HTML运行时导入无关 - Node.js场景更易混淆：
fs.readFileSync()能读任意文件，但浏览器没有fs，也没有同步读取权限——这个根本差异常被忽略
推荐组合：加载 + 解析要拆开做，且明确责任边界
不要试图让一个API同时承担网络请求、类型协商、字符解码、结构化转换四件事。现代实践是分层处理：
- 加载阶段：用
fetch()（支持cache、credentials等策略）或FileReader（针对用户选择文件） - 解码阶段：根据
Content-Type或文件扩展名决定用response.text()、response.json()、response.arrayBuffer() - 解析阶段：交给领域专用逻辑，比如用
DOMParser处理XML，用正则或csv-parse处理CSV，用YAML.parse()处理YAML - 错误处理必须绑定在解析环节：
try { JSON.parse(str) } catch (e) { console.error('JSON格式错误:', e.message) }，而不是寄希望于import()抛出有意义的错误
最常被跳过的一步是MIME类型校验——fetch()拿到的response.headers.get('content-type')可能为text/plain，但实际是JSON，此时response.json()仍会失败。这种隐式依赖，比写错一个import路径更难调试。
