使用window.showSaveFilePicker下载时，如何在浏览器底部显示文件？

问题的核心在于，showSaveFilePicker属于FileSystem Access API，它是直接和本地文件系统交互写入文件，不属于浏览器的标准下载流程，所以不会触发底部的下载记录——这是浏览器的设计限制。要同时实现自定义保存位置和下载栏记录，有两种可行方案：

方案一：保留自定义位置，补充下载记录触发 #

在用户选择位置并完成文件写入后，通过创建Blob URL并触发一次传统下载动作，强制生成下载记录（建议提前告知用户这一步是为了生成记录，避免困惑）。修改后的代码如下：

if ('showSaveFilePicker' in window) {
  window
    .showSaveFilePicker({ suggestedName: `${fileName}.mp4` })
    .then((fileHandle) => fileHandle.createWritable())
    .then(async (stream) => {
      await stream.write(blob);
      await stream.close();
      // 文件保存完成后，触发传统下载以生成记录
      const blobUrl = window.URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.setAttribute('download', `${fileName}.mp4`);
      document.body.appendChild(downloadLink);
      // 可添加提示告知用户
      alert('文件已保存到您选择的位置，点击确定生成下载记录');
      downloadLink.click();
      document.body.removeChild(downloadLink);
      window.URL.revokeObjectURL(blobUrl);
    })
    .catch((err) => console.log('SaveFile aborted'));
} else {
  const blobUrl = window.URL.createObjectURL(new Blob([blob]));
  const downloadLink = document.createElement('a');
  downloadLink.href = blobUrl;
  downloadLink.setAttribute('download', `${fileName}.mp4`);
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(blobUrl);
}

方案二：依赖浏览器设置，用传统下载实现双赢 #

如果用户浏览器开启了「每次下载时询问保存位置」的设置，直接使用传统的a标签下载就能同时满足：用户可选择保存位置，且浏览器底部会显示下载记录。你可以在页面上添加提示，引导用户开启该设置（通常在浏览器的下载设置中），代码保留原有的else分支逻辑即可。

补充说明 #

目前浏览器没有提供直接API让FileSystem Access API的操作触发下载栏记录，因为这两个功能属于不同的设计体系：前者是直接文件系统操作，后者是浏览器的下载流程管理。

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