如何在Angular项目中将URL文件下载到指定目录？

从API响应中获取到一个可下载的文件URL，在浏览器中访问该URL时，文件会下载到系统默认的下载文件夹。但我希望将该文件下载到项目内的指定目录，请问这是否可行？我的下载代码如下：

downloadFile(url, i){
 if(i==0 || i==1){
   let file = new Blob([url], { type: 'html;charset=utf-8' });
   saveAs(url, 'outputfile.html')
 }else if(i==2){
   let file = new Blob([url], { type: 'zip;charset=utf-8' });
   saveAs(url, 'outputfile.zip')
 }else if(i==3){
   let file = new Blob([url], { type: 'text;charset=utf-8' });
   saveAs(url, 'outputfile.txt')
 }
}

1. 浏览器端无法直接指定下载目录
   出于安全限制，浏览器不允许前端JavaScript直接控制文件保存到本地的具体路径——这是为了防止恶意脚本未经用户授权就读写本地文件系统。所以你没办法强制文件下载到「项目内指定目录」，只能让浏览器使用默认下载目录，或者触发用户手动选择保存位置。

2. 现有代码的问题修正
   你当前的代码存在逻辑错误：你把URL字符串直接塞进了Blob里，而不是去请求这个URL对应的文件内容。正确的做法是先通过fetch获取文件的二进制数据，再转成Blob，最后用saveAs保存。修正后的代码示例：

async function downloadFile(url, i) {
  // 先请求文件内容
  const response = await fetch(url);
  const blob = await response.blob();
  
  // 根据类型设置文件名和对应MIME类型
  let fileName;
  if (i === 0 || i === 1) {
    fileName = 'outputfile.html';
  } else if (i === 2) {
    fileName = 'outputfile.zip';
  } else if (i === 3) {
    fileName = 'outputfile.txt';
  }
  
  // 传入blob对象而非原url进行保存
  saveAs(blob, fileName);
}

3. 特殊场景的替代方案

• 如果是Node.js后端环境：可以用axios配合fs模块下载文件并直接写入指定目录，完全可控。
• 如果是Electron这类桌面应用：因为内置Node.js环境支持，也可以直接指定本地路径保存文件。
• 浏览器端想让用户自主选择保存位置：可以使用File System Access API（仅部分现代浏览器支持），但需要用户手动授权并选择目录，依然无法自动指定到项目目录。

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