HTML下载链接打开MP3而非下载，如何实现指定文件名下载？

你的问题核心是：跨域资源的download属性受浏览器安全限制，只有当目标服务器返回允许下载的响应头，或者通过前端将资源转为本地Blob时，才能触发下载。以下是具体解决方法：

1. 后端配置（最优方案，若能控制目标服务器） #

如果可以修改media.radiofrance-podcast.net服务器的响应配置，添加以下HTTP头：

• Content-Disposition: attachment; filename="synode 2023 : vent de réforme sur l’église ?.mp3"：强制浏览器将资源识别为附件，直接触发下载，同时指定默认文件名。
• 若你的页面在其他域名下，还需配置CORS相关头：
  • Access-Control-Allow-Origin: 你的页面域名（或*允许所有，但不推荐）
  • Access-Control-Expose-Headers: Content-Disposition：让前端能读取到文件名头

配置后，原有的<a>标签无需修改即可正常触发下载。

2. 前端绕过方案（无法控制后端时） #

通过Fetch API将远程MP3转为本地Blob，再创建临时链接触发下载，代码示例：

// 给下载按钮绑定点击事件
document.querySelector('.btn.fa-download').addEventListener('click', async (e) => {
  e.preventDefault(); // 阻止默认的流式播放行为
  const targetUrl = e.currentTarget.href;
  const fileName = "synode 2023 : vent de réforme sur l’église ?.mp3";

  try {
    // 请求获取文件Blob
    const response = await fetch(targetUrl);
    if (!response.ok) throw new Error('请求失败');
    const blob = await response.blob();
    
    // 创建临时下载链接
    const blobUrl = URL.createObjectURL(blob);
    const tempLink = document.createElement('a');
    tempLink.href = blobUrl;
    tempLink.download = fileName;
    
    // 触发下载
    document.body.appendChild(tempLink);
    tempLink.click();
    
    // 清理资源
    document.body.removeChild(tempLink);
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.error('下载出错:', err);
    // 跨域禁止时的降级方案
    alert('无法自动下载，请右键点击按钮选择「另存为」');
  }
});

注意事项 #

• 该方案依赖目标服务器允许跨域请求（即返回Access-Control-Allow-Origin头），如果服务器完全禁止跨域，此方法会失效，只能引导用户手动右键另存为。
• 大文件下载时，Blob可能占用较多内存，需根据实际场景调整。

内容的提问来源于stack exchange，提问作者An old man in the sea.