无Content-Disposition头时如何自定义下载文件的文件名？

当服务器返回的文件响应没有Content-Disposition头时，浏览器默认会用URL路径的最后一段作为文件名。如果要自定义文件名，前端可以通过以下两种方式实现：

1. 直接使用HTML <a>标签的download属性 #

这是最简单的方案，只要在原有的<a>标签上添加download属性并指定自定义文件名即可：

<a href="https://nodejs.org/dist/v20.12.1/node-v20.12.1.pkg" download="nodejs-v20.12.1-自定义版本.pkg">下载Node.js</a>

• 注意：如果链接是跨域资源，且服务器未配置CORS允许读取资源，这个属性可能不会生效（浏览器会 fallback 到默认文件名）。

2. 通过Fetch API获取Blob后自定义下载 #

如果download属性因为跨域等原因无法生效，可以通过Fetch API先获取文件的Blob对象，再创建临时下载链接并指定文件名：

async function downloadWithCustomName(fileUrl, customFileName) {
  try {
    // 请求文件资源
    const res = await fetch(fileUrl);
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    
    // 转换为Blob对象
    const fileBlob = await res.blob();
    // 创建临时URL
    const tempUrl = URL.createObjectURL(fileBlob);
    
    // 创建临时<a>标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = tempUrl;
    downloadLink.download = customFileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理资源
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(tempUrl);
  } catch (err) {
    console.error('自定义下载失败：', err);
  }
}

// 调用示例
downloadWithCustomName('https://nodejs.org/dist/v20.12.1/node-v20.12.1.pkg', '我的NodeJS安装包.pkg');

这种方法兼容性更好，只要服务器允许CORS跨域请求，就能自定义文件名，还能额外添加下载进度监听等逻辑。

补充说明：Node.js官网的下载链接没有Content-Disposition头，是因为URL路径已经包含了明确的文件名，浏览器可以自动识别并使用，所以不需要额外通过响应头指定。

内容的提问来源于stack exchange，提问作者Devin Johw