如何检测浏览器是否支持File System Access API的showSaveFilePicker()

直接检测API存在性 #

最可靠且无副作用的检测方式，是直接检查全局window对象上是否存在该函数——完全不需要调用它，也就不会触发用户交互或误判用户取消操作的情况：

const supportsSaveFilePicker = typeof window.showSaveFilePicker === 'function';

原理很简单：如果浏览器支持File System Access API中的showSaveFilePicker，window对象会挂载这个函数；不支持的话，typeof会返回'undefined'，以此明确区分支持状态。

完整使用示例 #

结合检测逻辑和降级方案的代码示例：

// 提前检测支持性
const supportsSaveFilePicker = typeof window.showSaveFilePicker === 'function';

async function saveUserData(userInputData) {
  if (supportsSaveFilePicker) {
    try {
      // 调用File System Access API保存
      const fileHandle = await window.showSaveFilePicker({
        suggestedName: '用户数据.txt',
        types: [{
          description: '文本文件',
          accept: { 'text/plain': ['.txt'] }
        }]
      });
      const writableStream = await fileHandle.createWritable();
      await writableStream.write(userInputData);
      await writableStream.close();
    } catch (error) {
      // 只处理真正的错误，用户取消操作抛出的AbortError忽略
      if (error.name !== 'AbortError') {
        console.error('保存出错:', error);
        // 出错时降级到标准下载
        fallbackToStandardDownload(userInputData);
      }
    }
  } else {
    // 不支持时直接用标准下载方案
    fallbackToStandardDownload(userInputData);
  }
}

function fallbackToStandardDownload(data) {
  const blob = new Blob([data], { type: 'text/plain' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = '用户数据.txt';
  link.click();
  // 释放URL对象避免内存泄漏
  URL.revokeObjectURL(downloadUrl);
}

关键说明 #

• 检测逻辑完全避开了用户交互，不会出现把“用户取消保存”误判为“API不支持”的情况。
• 在支持API的情况下，用try-catch仅处理真正的异常（比如权限不足、系统错误），用户主动取消的AbortError不需要处理，也不会触发降级。

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