如何通过HTML/JS实现Web应用JSON/CSV多文件类型下载选择？

首先明确：浏览器无法通过单一Blob对象让系统保存对话框显示多格式选项——你遇到的逗号分隔MIME类型只有最后一个生效，是因为浏览器的Blob API仅允许指定单一MIME类型，保存对话框的“保存类型”会直接沿用这个类型，无法同时列出多个选项。

不过有两种可行的方式实现你要的功能：

方案1：提前让用户选择格式（全浏览器兼容） #

在下载按钮前加一个下拉选择框，让用户先选JSON/CSV，点击下载时根据选择生成对应格式的Blob，再触发下载。这种方式所有浏览器都支持，逻辑简单。

示例代码：

<!-- HTML -->
<select id="downloadFormat">
  <option value="json">JSON 格式</option>
  <option value="csv">CSV 格式</option>
</select>
<button id="downloadBtn">下载数据</button>

// JS
const downloadBtn = document.getElementById('downloadBtn');
const formatSelect = document.getElementById('downloadFormat');

// 模拟原始业务数据
const rawData = [
  { name: '张三', age: 25, email: 'zhangsan@example.com' },
  { name: '李四', age: 30, email: 'lisi@example.com' }
];

// JSON转CSV的工具函数
function convertToCSV(data) {
  const headers = Object.keys(data[0]);
  const rows = data.map(row => headers.map(fieldName => JSON.stringify(row[fieldName])).join(','));
  return [headers.join(','), ...rows].join('\n');
}

downloadBtn.addEventListener('click', () => {
  const selectedFormat = formatSelect.value;
  let blob, fileName;

  if (selectedFormat === 'json') {
    blob = new Blob([JSON.stringify(rawData, null, 2)], { type: 'application/json' });
    fileName = 'data.json';
  } else {
    blob = new Blob([convertToCSV(rawData)], { type: 'text/csv' });
    fileName = 'data.csv';
  }

  // 触发下载
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

方案2：使用File System Access API（原生对话框体验） #

现代浏览器支持的showSaveFilePicker()方法，可以直接在系统保存对话框中提供多格式选项，用户选择后再写入对应格式的数据。这种方式交互更符合你的需求，但仅支持Chrome 86+、Edge 86+、Firefox 111+等现代浏览器。

示例代码：

const downloadBtn = document.getElementById('downloadBtn');
const rawData = [
  { name: '张三', age: 25, email: 'zhangsan@example.com' },
  { name: '李四', age: 30, email: 'lisi@example.com' }
];

function convertToCSV(data) {
  const headers = Object.keys(data[0]);
  const rows = data.map(row => headers.map(fieldName => JSON.stringify(row[fieldName])).join(','));
  return [headers.join(','), ...rows].join('\n');
}

downloadBtn.addEventListener('click', async () => {
  try {
    // 配置保存对话框的可选格式
    const handle = await window.showSaveFilePicker({
      suggestedName: 'data',
      types: [
        {
          description: 'JSON 文件',
          accept: { 'application/json': ['.json'] }
        },
        {
          description: 'CSV 文件',
          accept: { 'text/csv': ['.csv'] }
        }
      ]
    });

    // 根据用户选择的后缀判断格式
    const fileType = handle.name.endsWith('.json') ? 'json' : 'csv';
    const data = fileType === 'json' 
      ? JSON.stringify(rawData, null, 2) 
      : convertToCSV(rawData);

    // 写入文件
    const writable = await handle.createWritable();
    await writable.write(data);
    await writable.close();
  } catch (err) {
    // 处理用户取消或错误情况
    console.error('下载失败:', err);
  }
});

两种方案各有优劣：方案1兼容性拉满，适合所有场景；方案2交互更原生，但需要考虑浏览器版本限制。你可以根据自己的用户群体选择合适的实现方式。

内容的提问来源于stack exchange，提问作者Funtime60