近日，知名技术问答社区 Stack Overflow 上，一则看似简单的提问引发了众多前端开发者的讨论：“How can I save data.txt to a user-selected directory without using showSaveFilePicker()?”（如何在不使用 showSaveFilePicker() 的情况下，将 data.txt 保存到用户选择的目录？）这个问题直指 Web 开发中一个长期存在的痛点：浏览器对文件保存功能的严格限制，以及新 API 尚不完善的兼容性现状。本文将就此展开深入解读。

一、问题的原委：安全与便捷的博弈

在标准的 Web 应用中，JavaScript 无法直接访问用户文件系统上的任意路径。这是浏览器安全模型的核心原则——防止恶意脚本窃取或篡改本地数据。传统上，开发者只能通过两种方式实现“保存”行为：一是使用 <a> 标签配合 download 属性触发下载，但下载位置由浏览器默认设置决定，用户无法指定目录；二是通过 <input type="file"> 让用户上传文件，却不能直接写入。

showSaveFilePicker() 是 File System Access API 的一部分，首次出现在 Chrome 86 中，它允许 Web 应用弹出原生的“另存为”对话框，让用户自由选择保存路径，并返回一个可写文件句柄。然而，该 API 目前仅在基于 Chromium 的浏览器中得到支持（Chrome、Edge、Opera），在 Firefox 和 Safari 中仍处于“未实现”状态，且需要 secure context（HTTPS 环境）。因此，大量开发者不得不寻找兼容性更好的替代方案。

二、不完美的替代方案：回归传统与曲线救国

1. 直接下载：最通用但最不灵活

最常见的方法是创建 Blob，生成临时 URL，再触发一个隐藏的 <a> 元素点击。

const blob = new Blob([data], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.txt';
a.click();
URL.revokeObjectURL(url);

优点：所有现代浏览器均支持，无需用户授权。缺点：用户无法选择保存目录，文件会默认存入浏览器的下载文件夹，且部分浏览器会忽略 download 属性直接打开文件。实际上，这一方案并未真正解答“让用户选择目录”的需求。

2. 使用 showDirectoryPicker() 写入已有目录？

部分开发者提出，既然 showSaveFilePicker() 不可用，能否用 showDirectoryPicker() 让用户选择文件夹，然后在该文件夹中创建文件？理论上可行，但 showDirectoryPicker() 同样属于 File System Access API，且只支持读取和写入文件内容，却无法生成“新建文件”的对话框，用户体验不佳。而且该方法依然依赖 Chrome 等少数浏览器。

3. 利用 WebUSB 或 Native File System？不现实

有人曾尝试通过 WebUSB 或 WebSerial 连接本地设备，再通过设备写入文件系统，但这显然偏离了通用 Web 开发的范畴，且需要用户额外硬件支持，可行性极低。

4. 依赖桌面框架：Electron 与 Tauri

对于需要跨平台桌面应用场景，开发者可借助 Electron 的 dialog.showSaveDialog() 或 Tauri 的 dialog.save() 方法。这些 API 原生于操作系统，能弹出真实的选择目录对话框，且不受浏览器限制。例如在 Electron 中：

const { dialog } = require('electron');
const { writeFile } = require('fs');

dialog.showSaveDialog({
  defaultPath: 'data.txt',
  filters: [{ name: 'Text files', extensions: ['txt'] }]
}).then(result => {
  if (!result.canceled && result.filePath) {
    writeFile(result.filePath, data, 'utf8', (err) => { /* ... */ });
  }
});

不过，这已超出“纯浏览器”范畴，需要打包成原生应用。

三、社区讨论：是妥协还是升级？

在 Stack Overflow 问题下方，高赞回答指出：在纯浏览器环境中，如果不依赖 File System Access API，确实没有标准方法让用户选择保存目录。 这是浏览器安全策略的根本限制。因此，开发者面临的选择是：

  • 接受现状：使用默认下载方式，并在页面提示用户“文件已保存到下载文件夹”。
  • 升级路线：采用 showSaveFilePicker() 并提供 polyfill 回退方案。
  • 转向桌面：如果应用确实需要目录选择能力，考虑 Electron 或 Tauri 等框架。

一些第三方库如 FileSaver.js 通过 Blob 和 <a> 元素实现了更优雅的下载，但依然无法选择目录。另有人提出利用 Service Worker 拦截响应，但同样无法绕过浏览器对本地文件系统的保护。

四、未来：File System Access API 的普及

尽管目前 showSaveFilePicker() 的兼容性有限，但 W3C 草案正积极推进此 API 的标准化。Chrome 团队也在持续优化其稳定性与性能。随着 Firefox 和 Safari 逐步开放 Web 应用对文件系统的访问（Safari 已在部分版本中支持读取目录，写入仍在讨论），未来开发者有望在更广泛的平台上实现“一键选择目录保存”的丝滑体验。

五、总结与建议

回到最初的问题：如果不使用 showSaveFilePicker()，目前不存在一个既兼容所有浏览器、又能弹出原生目录选择对话框的纯前端方案。开发者应当根据应用场景做出权衡：

  • 仅需下载：使用 <a download> 或 URL.createObjectURL。
  • 需交互选择：使用 showSaveFilePicker() 并做好降级提示。
  • 桌面级需求：考虑 Electron / Tauri，可以拥有完整的文件系统控制权。

Web 技术的发展始终在安全与用户体验之间寻找平衡。showSaveFilePicker() 代表了浏览器赋予 Web 应用更多本地能力的趋势，而它的残缺兼容性则是这个过渡期的阵痛。对于开发者而言，理解这些 API 的边界与局限，正是构建可靠产品的基础。