如何修改代码实现用户自定义选择HTML文件的保存路径？

好问题！要让用户自定义保存操作记录的路径，你需要用到File System Access API——这是现代浏览器提供的一组原生API，能让Web应用直接和用户设备的文件系统交互，包括弹出保存对话框让用户选择具体的保存位置和文件名。

为什么原来的方法只能用默认路径？ #

你之前的代码应该是通过创建<a>标签并设置download属性来触发下载，这种方式完全由浏览器控制保存路径，无法让用户自定义——这是浏览器的安全限制，避免Web应用随意读写用户文件系统。

具体实现步骤 #

下面是替换原有逻辑的完整方案，包含代码示例和注意事项：

1. 核心代码：用showSaveFilePicker()实现自定义保存

这个方法会弹出系统原生的保存对话框，让用户选择路径和文件名，之后你可以通过文件句柄写入内容：

// 假设yourHistoryList是你的站点操作记录数组
const yourHistoryList = [
  { action: '登录', time: '2024-05-20 10:00' },
  { action: '修改设置', time: '2024-05-20 10:30' }
];

async function saveHistoryToCustomPath() {
  try {
    // 弹出保存对话框，配置建议文件名和支持的文件类型
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'site-history.json',
      types: [
        {
          description: 'JSON格式记录',
          accept: { 'application/json': ['.json'] },
        },
        {
          description: '纯文本记录',
          accept: { 'text/plain': ['.txt'] },
        },
      ],
    });

    // 创建可写流，准备写入内容
    const writableStream = await fileHandle.createWritable();

    // 将操作记录转为格式化的JSON字符串（也可以转成纯文本）
    const historyContent = JSON.stringify(yourHistoryList, null, 2);

    // 写入文件内容
    await writableStream.write(historyContent);

    // 关闭流，完成保存
    await writableStream.close();

    alert('操作记录已成功保存到你选择的路径！');
  } catch (error) {
    // 处理用户取消操作的情况（AbortError是用户主动关闭对话框）
    if (error.name !== 'AbortError') {
      console.error('保存失败:', error);
      alert('保存失败，请检查权限或重试！');
    }
  }
}

2. 触发按钮

在HTML中添加一个按钮，让用户主动触发保存操作（浏览器要求这个API必须由用户交互触发，不能自动执行）：

<button onclick="saveHistoryToCustomPath()">保存操作记录（自定义路径）</button>

3. 兼容性降级处理

如果需要兼容不支持File System Access API的旧浏览器（比如旧版Safari），可以做降级处理，回退到原来的默认下载方式：

async function saveHistory() {
  if ('showSaveFilePicker' in window) {
    // 支持API的浏览器，用自定义路径保存
    await saveHistoryToCustomPath();
  } else {
    // 不支持的浏览器，回退到默认下载
    const historyContent = JSON.stringify(yourHistoryList, null, 2);
    const blob = new Blob([historyContent], { type: 'application/json' });
    const downloadUrl = URL.createObjectURL(blob);
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.download = 'site-history.json';
    aTag.click();
    URL.revokeObjectURL(downloadUrl);
  }
}

关键注意事项 #

• 安全上下文要求：这个API必须在HTTPS环境下运行，本地开发的localhost是允许的，HTTP环境下无法使用。
• 用户交互触发：必须由用户主动操作（比如点击按钮）调用，不能在页面加载时自动执行，否则会被浏览器的安全机制阻止。
• 浏览器兼容性：目前Chrome、Edge、Firefox 118+、Safari 15.4+已经支持该API，你可以通过'showSaveFilePicker' in window来检测支持情况。

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