浏览器端JavaScript实现保存对话框并获取路径保存文件

一、传统兼容方案（支持所有现代浏览器） #

你的现有代码存在一个小错误：URL.revokeObjectURL(url)中的url未定义，应该替换为创建的Object URL。另外，部分浏览器会直接预览文本文件而非弹出「另存为」，调整后的核心逻辑如下：

document.getElementById('downloadButton').addEventListener('click', () => {
  const content = 'This is the content of the downloadable file.';
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = 'downloaded-file.txt'; // 默认文件名，用户可在对话框修改
  // 触发点击唤起对话框
  a.click();
  
  // 清理资源
  URL.revokeObjectURL(url);
});

注意：这种方式无法获取用户选择的文件完整路径（浏览器安全限制），但能稳定唤起「另存为」对话框，用户可修改文件名后保存。如果核心需求是保存内容而非获取路径，这是兼容性最优的方案。

二、File System Access API（现代浏览器，支持获取文件名） #

如果你需要获取用户最终选择的文件名（仍无法拿到完整系统路径，属于浏览器安全策略），可以使用File System Access API，但需满足两个前提：

• 页面运行在安全上下文（HTTPS协议或localhost环境）
• 代码必须在用户交互事件内部执行（比如按钮点击回调中）

修复你遇到的错误 #

你触发的DOMException通常是以下原因导致：

• 代码未在用户主动触发的交互事件中执行（比如页面加载时自动调用）
• 页面未运行在安全上下文环境

正确实现代码 #

document.getElementById('downloadButton').addEventListener('click', async () => {
  try {
    // 唤起「另存为」对话框，获取文件句柄
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'downloaded-file.txt',
      types: [
        {
          description: '文本文件',
          accept: { 'text/plain': ['.txt'] },
        },
      ],
    });

    // 创建文件写入流
    const writable = await fileHandle.createWritable();
    // 写入内容
    await writable.write('This is the content of the downloadable file.');
    // 关闭流完成保存
    await writable.close();

    // 获取用户最终选择的文件名
    console.log('用户保存的文件名:', fileHandle.name);
  } catch (err) {
    console.error('保存失败:', err);
  }
});

兼容性说明 #

• 支持Chrome/Edge 86+、Firefox 118+、Safari 15.4+
• 不支持IE及旧版浏览器，需兼容时请降级到传统方案

关键注意事项 #

1. 浏览器出于安全考虑，永远不会向网页暴露文件的完整系统路径，无论是传统方案还是File System API，都只能获取文件名或文件句柄用于操作。
2. File System API的调用必须由用户主动触发（比如点击按钮），不能自动执行，否则会触发权限错误。

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