HTML无原生导入导出能力，所有操作均由JavaScript通过Blob、URL.createObjectURL等API实现；导出JSON需用Blob包裹字符串并触发a标签下载；读取CSV须用FileReader配合手动解析或papaparse；导出Excel必须依赖SheetJS等库生成标准xlsx格式。
HTML 本身不提供导入导出能力，所有「HTML 导入导出」实际都是靠 JavaScript 驱动的客户端文件操作，核心是 Blob、URL.createObjectURL 和 —— 别被标题误导，没有纯 HTML 标签能直接读写文件。
怎么用 JS 导出 JSON 数据为 .json 文件
这是最常见需求：把页面上的配置、表单数据、表格内容生成可下载的 JSON 文件。关键不是“保存”，而是构造一个浏览器可识别的下载链接。
- 必须用
Blob包裹字符串，不能直接用data:URL（大文件会截断，且部分浏览器不支持） -
JSON.stringify(data, null, 2)加缩进提升可读性，但注意嵌套过深或循环引用会报错 —— 导出前先用JSON.stringify(data)测试是否合法 - 创建
a标签时，download属性值不能含路径（如./export.json），否则下载失败，只写文件名（如data.json）
const data = { users: [{ id: 1, name: "张三" }] };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "export.json";
a.click();
URL.revokeObjectURL(url); // 用完立即释放，避免内存泄漏
怎么读取本地 CSV 文件并解析成数组
用户点选 CSV 后，需用 FileReader 读取文本，再手动按行、按逗号拆分 —— 浏览器不内置 CSV 解析，别指望 JSON.parse 能处理。
- CSV 字段含逗号、换行或双引号时，简单
split(",")会崩；轻量场景可用csv-parse的轻量版（如papaparse），但若只支持基础格式，建议正则预处理 -
input[type="file"]的change事件中，从e.target.files[0]取File对象，它继承自Blob，可直接传给FileReader - 编码问题高频：用户用 Excel 保存的 CSV 常为
GBK或UTF-8 with BOM，FileReader.readAsText()默认 UTF-8，遇到乱码要加encoding参数（Chrome 支持，Firefox 不支持，稳妥起见优先提示用户保存为 UTF-8）
input.addEventListener("change", (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
const lines = reader.result.split("\n").filter(l => l.trim());
const rows = lines.map(line => line.split(","));
console.log(rows); // [["name","age"], ["张三","25"]]
};
reader.readAsText(file);
});
导出 HTML 表格为 Excel（.xlsx）的可行路径
「导出为 Excel」本质是生成符合 Office Open XML 标准的 ZIP 包（即 .xlsx），纯前端无法手写完整格式，必须依赖库 —— SheetJS (xlsx.js) 是目前最稳定的选择。
- 不要用「生成 HTML 表格 → 改后缀为 .xls」这种老方案：Excel 会警告格式错误，且不支持公式、多 sheet、样式等，现代 Excel 版本可能直接拒开
-
xlsx.write()的type: "blob"是关键，配合saveAs（来自file-saver）才能触发下载；单独用type: "base64"易遇长度限制 - 如果表格含中文，确保
workbook.Props.Title等元信息也设为字符串，否则某些版本 Excel 打开时卡死
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
<p>const table = document.getElementById("my-table");
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, "table.xlsx"); // 内部已集成 saveAs</p>
真正麻烦的从来不是“怎么导出”，而是数据结构不规整（比如表格跨行、合并单元格）、字符编码不一致、或者用户拿记事本改了 CSV 后再上传——这些边界情况没统一解法，得在具体场景里补校验和降级逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
