浏览器原生下载对话框不支持动态切换文件类型，但可通过提供多个预生成的下载链接（如 JSON 和 CSV 各一个），配合前端格式转换逻辑，实现“用户选择导出格式”的体验。核心在于分离格式选择与数据生成，而非依赖单个 <a> 标签的 accept 属性控制系统对话框下拉选项。
浏览器原生下载对话框不支持动态切换文件类型，但可通过提供多个预生成的下载链接（如 json 和 csv 各一个），配合前端格式转换逻辑，实现“用户选择导出格式”的体验。核心在于分离格式选择与数据生成，而非依赖单个 `` 标签的 `accept` 属性控制系统对话框下拉选项。
在 Web 应用中，用户常需将结构化数据导出为不同格式（如 JSON 或 CSV）。但需明确一个关键限制：HTML 的 <a download> 机制无法让浏览器系统保存对话框（如 Windows 的“保存类型”下拉菜单）动态显示多种 MIME 类型供用户实时选择。这是因为该对话框仅反映当前触发下载的 Blob 或 URL 的 type，且浏览器不会根据 accept 属性（仅用于 <input type="file">）修改保存对话框的文件类型列表。
因此，正确做法是：为每种目标格式预先生成对应的 Blob，并分别绑定到独立的下载触发元素。用户点击“导出为 JSON”或“导出为 CSV”按钮时，前端即时生成对应格式的数据并触发下载。
以下是一个完整、可运行的实现示例：
<!-- HTML -->
<button id="downloadJson">? 导出为 JSON</button>
<button id="downloadCsv">? 导出为 CSV</button>
<script>
// 示例数据（实际项目中可能来自 API 或状态管理）
const data = [
{ name: "Alice", age: 30, city: "Beijing" },
{ name: "Bob", age: 25, city: "Shanghai" },
{ name: "Charlie", age: 35, city: "Guangzhou" }
];
// JSON 下载
document.getElementById('downloadJson').addEventListener('click', () => {
const blob = new Blob([JSON.stringify(data, null, 2)], {
type: 'application/json;charset=utf-8'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
// CSV 下载（简易转换，支持基础字段）
document.getElementById('downloadCsv').addEventListener('click', () => {
if (data.length === 0) return;
const headers = Object.keys(data[0]);
const csvRows = [
headers.join(','),
...data.map(row =>
headers.map(header => {
const val = row[header] ?? '';
// 简单 CSV 转义：含逗号、换行或引号的值加双引号，内部双引号转义为两个双引号
return typeof val === 'string' && /[,\"\n]/.test(val)
? `"${val.replace(/"/g, '""')}"`
: val;
}).join(',')
)
];
const blob = new Blob([csvRows.join('\n')], {
type: 'text/csv;charset=utf-8'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
</script>✅ 注意事项与最佳实践：
- 不要尝试用 type: "application/json,text/csv" 拼接 MIME 类型：Blob 构造函数只接受单一 type 字符串，多余部分会被忽略。
- CSV 转义不可省略：真实数据中可能包含逗号、换行符或双引号，必须按 RFC 4180 规范处理，否则会破坏表格结构。
- 大数据量建议服务端导出：若数据超过 10MB 或含复杂嵌套/计算逻辑，应在后端生成文件并返回带 Content-Disposition 的响应，避免阻塞主线程或内存溢出。
- 无障碍与 UX 提升：为按钮添加 aria-label，禁用状态反馈（如加载中），并考虑增加格式说明 tooltip（例如“CSV 适用于 Excel 表格”）。
总结而言，虽然浏览器不支持“单链接 + 多格式下拉”，但通过清晰的 UI 分离（双按钮）+ 前端轻量格式转换，即可优雅达成用户需求。这是一种被主流应用（如 Notion、Airtable 的导出功能）广泛采用的可靠模式。
