如何使用JavaScript为HTML页面下载文件设置自定义相对保存路径

问题根因 #

浏览器出于沙箱安全限制，前端JavaScript没有权限自定义文件下载的本地路径，你使用的saveAs接口第二个参数仅支持传入文件名，不识别路径参数，你填写的./a.jpg会被浏览器自动忽略路径部分，最终仅保留文件名按浏览器默认下载规则保存到系统下载目录，即便开启了--disable-web-security也不会突破文件写入的路径限制。

另外你现有代码存在冗余逻辑：toBlob返回的本身就是符合要求的Blob对象，不需要额外用new Blob([blob])再封装一层。

可行解决方案 #

• 方案1：修改Chromium启动参数指定默认下载目录
  你可以在现有启动命令后追加下载目录参数，直接指定为你index文件所在的目录绝对路径即可：

  chromium-browser --disable-web-security --download.default_directory="/your/index/file/absolute/path"
  

  配置后当前Chromium实例触发的所有下载都会默认保存到你指定的目录，原有代码无需大幅修改，只需要把saveAs的第二个参数改成'a.jpg'即可（删掉多余的路径前缀）。

• 方案2：套Electron壳实现本地文件系统读写
  你本身是npm项目，改造成Electron项目成本极低，Electron的主进程拥有完整的Node.js文件操作权限，你可以在前端裁剪拿到blob后，通过IPC将blob数据发送给主进程，主进程调用fs.writeFile接口即可自由使用相对/绝对路径写入文件，相对路径默认相对于应用启动目录，完全匹配你的需求，还可以后续打包成独立桌面应用，无需用户手动启动Chromium。

• 方案3：调用浏览器文件系统API手动选择保存路径
  如果你需要灵活选择保存位置，可以使用新版Chromium支持的文件系统访问API，示例代码如下：

  async crop(event) {
    const blob = await new Promise(resolve => cropper.getCroppedCanvas().toBlob(resolve, 'image/jpeg'));
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'a.jpg',
      types: [{
        description: 'JPEG Image',
        accept: {'image/jpeg': ['.jpg']}
      }]
    });
    const writable = await fileHandle.createWritable();
    await writable.write(blob);
    await writable.close();
  }
  

  该API会唤起系统保存文件弹窗，用户可以自主选择保存位置，在开启--disable-web-security的场景下权限无限制。

内容的提问来源于stack exchange，提问作者Tlaloc-ES