如何让网页导出文件触发「另存为」而非直接存入下载文件夹？

前端方案：使用 File System Access API #

Firefox 对原生 <a> 标签的 download 属性会遵循全局下载设置，要针对站点单独触发另存为，可以用File System Access API，这个 API 允许前端直接请求用户选择保存路径，完全绕开浏览器的自动下载规则。

代码示例：

async function exportData(state) {
  const jsonContent = JSON.stringify(state, null, 2);
  const filename = `filedump_${state.meta.name || 'export'}.json`;

  try {
    // 触发另存为弹窗，指定默认文件名和允许的文件类型
    const handle = await window.showSaveFilePicker({
      suggestedName: filename,
      types: [
        {
          description: 'JSON 文件',
          accept: { 'application/json': ['.json'] }
        }
      ]
    });

    // 写入文件内容
    const writable = await handle.createWritable();
    await writable.write(jsonContent);
    await writable.close();
  } catch (err) {
    // 用户取消保存时的处理
    console.log('用户取消了保存操作');
  }
}

// 调用导出函数
exportData(state);

注意事项：

• 该 API 仅支持 Firefox 111 及以上版本，且必须在安全上下文（HTTPS 或 localhost）中运行
• 用户拒绝保存时会抛出异常，需要添加错误捕获

后端方案：通过响应头强制触发另存为 #

如果需要兼容更低版本的 Firefox，或者前端 API 无法满足需求，可以通过后端返回文件时设置特定响应头，强制浏览器弹出另存为窗口，不受全局下载设置影响。

核心响应头设置：

• Content-Disposition: attachment; filename="你的文件名.json"：告诉浏览器以附件形式处理该文件，触发另存为
• Content-Type: application/json：指定文件类型为 JSON

示例（Node.js/Express）： #

app.get('/export-json', (req, res) => {
  const state = { /* 你的数据 */ };
  const jsonContent = JSON.stringify(state, null, 2);
  const filename = `filedump_${state.meta.name || 'export'}.json`;

  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
  res.send(jsonContent);
});

示例（PHP）： #

<?php
$state = /* 你的数据 */;
$jsonContent = json_encode($state, JSON_PRETTY_PRINT);
$filename = 'filedump_' . ($state['meta']['name'] ?? 'export') . '.json';

header('Content-Type: application/json');
header('Content-Disposition: attachment; filename="' . $filename . '"');
echo $jsonContent;
?>

使用时，前端可以通过点击链接或发起请求来触发后端接口，即可弹出另存为弹窗。

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