浏览器原生下载对话框不支持动态切换 mime 类型或“保存类型”下拉选项；正确做法是为每种格式提供独立的下载入口，并在 javascript 中按需生成对应格式的 blob 数据。
浏览器原生下载对话框不支持动态切换 mime 类型或“保存类型”下拉选项；正确做法是为每种格式提供独立的下载入口，并在 javascript 中按需生成对应格式的 blob 数据。
在 Web 应用中，当用户点击“下载”时希望自由选择 JSON 或 CSV 格式，一个常见误解是：能否通过单个 <a download> 链接触发系统“另存为”对话框，并在其中显示类似 Windows 下的“保存类型”下拉菜单（如 “JSON 文件 (*.json)” / “CSV 文件 (*.csv)”）。遗憾的是，HTML 和标准 JavaScript API 并不支持该行为——<a download> 和 URL.createObjectURL() 仅能绑定一个预生成的 Blob，其 type 属性仅影响默认文件扩展名和部分浏览器的建议 MIME，但无法向操作系统级保存对话框注入多个可选格式。
✅ 正确且兼容性良好的实现方式是：提供两个明确的下载按钮（或一个带格式切换的控件），分别触发对应格式的数据序列化与 Blob 创建。
以下是一个简洁、可复用的示例：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
<!-- UI 控制 --> <select id="format-select"> <option value="json">JSON (.json)</option> <option value="csv">CSV (.csv)</option> </select> <button id="download-btn">下载数据</button>
// 示例数据（实际中可能来自 API 或状态）
const rawData = [
{ name: "Alice", age: 30, city: "Beijing" },
{ name: "Bob", age: 25, city: "Shanghai" }
];
// JSON 序列化（保持结构清晰，带缩进）
function toBlobJSON(data) {
const json = JSON.stringify(data, null, 2);
return new Blob([json], { type: "application/json;charset=utf-8" });
}
// CSV 序列化（简易版，支持中文、逗号转义）
function toBlobCSV(data) {
if (!data.length) return new Blob([""], { type: "text/csv;charset=utf-8" });
const headers = Object.keys(data[0]);
const escape = (s) => typeof s === 'string' && s.includes(',') ? `"${s.replace(/"/g, '""')}"` : s;
const csvRows = [
headers.join(','),
...data.map(row => headers.map(h => escape(row[h])).join(','))
];
return new Blob([csvRows.join('\n')], { type: "text/csv;charset=utf-8" });
}
// 绑定下载逻辑
document.getElementById('download-btn').addEventListener('click', () => {
const format = document.getElementById('format-select').value;
const blob = format === 'json' ? toBlobJSON(rawData) : toBlobCSV(rawData);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `data.${format}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放内存
});⚠️ 注意事项：
- 不要尝试用逗号拼接 MIME 类型（如 "application/json,text/csv"）——Blob 构造器只接受单一有效类型，多余内容会被忽略；
- CSV 导出需谨慎处理特殊字符（引号、换行、逗号），上述示例包含基础转义，生产环境建议使用 Papa Parse 等成熟库；
- 若数据量极大（>10MB），客户端序列化可能阻塞主线程，此时应考虑服务端导出（通过 /export?format=csv 接口流式响应）；
- 所有 Blob 必须显式调用 URL.revokeObjectURL() 清理，避免内存泄漏。
总结：虽然浏览器不提供“格式下拉式保存对话框”，但通过语义清晰的 UI + 格式化逻辑分离 + Blob 动态生成，完全可以实现专业、可靠、跨浏览器的多格式导出体验。关键在于将“格式选择”前置到用户操作层，而非依赖系统对话框的不可控能力。
