Angular中如何通过window.open实现自定义文件名保存文件

window.open()没法直接自定义下载文件名——它要么沿用服务器返回的Content-Disposition头指定的名称，要么使用文件路径里的原始文件名。要实现自定义文件名，推荐以下两种方案：

方案1：前端用标签+Blob处理（能获取文件内容时适用） #

这种方法无需后端改动，纯前端就能实现：

• 用fetch拉取文件内容并转换为Blob对象
• 创建隐藏的<a>标签，将download属性设置为你需要的自定义文件名
• 生成Blob的临时URL，赋值给a标签的href属性
• 模拟点击a标签触发下载，最后清理临时资源避免内存泄漏

代码示例：

async function downloadWithCustomName(fileUrl, customFileName) {
  try {
    const response = await fetch(fileUrl);
    const blob = await response.blob();
    const tempUrl = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = tempUrl;
    link.download = customFileName; // 这里填写带后缀的自定义文件名
    document.body.appendChild(link);
    link.click();

    // 清理临时资源
    document.body.removeChild(link);
    URL.revokeObjectURL(tempUrl);
  } catch (error) {
    console.error('下载失败:', error);
  }
}

// 调用示例
downloadWithCustomName('/uploads/original-invoice.pdf', '2024年6月公司发票.pdf');

方案2：后端配合修改响应头（无法获取文件内容时适用） #

如果文件是跨域资源，或者你没法直接获取文件内容，就需要后端配合调整：
后端在返回文件时，设置Content-Disposition响应头，明确指定自定义文件名：

Content-Disposition: attachment; filename="你的自定义文件名.pdf"

如果后端支持动态传参，前端还可以把自定义文件名作为参数传递：

window.open(`/api/download?fileId=456&customName=2024年6月公司发票.pdf`);

后端拿到customName参数后，动态生成对应响应头即可。

注意事项 #

• 跨域文件需确保服务器配置了CORS，否则fetch会触发跨域错误
• download属性不支持IE等旧浏览器，现代浏览器均已兼容
• 大文件使用Blob方式可能占用较多内存，这种场景优先选择后端方案

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