使用download属性下载文件遇异常：相对路径找不到/绝对路径直接打开

问题1：相对路径提示文件未找到 #

针对这个问题，你可以按以下步骤排查解决：

• 检查渲染后的实际路径：右键点击下载链接，查看href属性的真实值，对比服务器上文件的实际存储路径，确认是否存在斜杠重复（比如/media//file.pdf）或路径拼写错误。
• 验证服务器静态文件配置：如果使用后端框架（如Django、Flask），确认MEDIA_URL与MEDIA_ROOT的映射是否正确；如果是Nginx/Apache等服务器，检查/media/目录是否正确指向文件存储的物理路径，同时确保服务器对该文件有读取权限。
• 检查模板变量值：确认{{file.filePath}}是否包含多余前缀，比如如果filePath本身已以/开头，会导致/media/{{file.filePath}}变成双斜杠路径，此时需要调整变量值或模板中的路径拼接方式。

问题2：绝对路径文件在浏览器打开而非下载 #

这个问题由浏览器默认行为导致，可通过以下方式解决：

• 服务器端设置响应头（最可靠）：返回文件时添加Content-Disposition: attachment; filename="你的文件名.ext"响应头，强制浏览器触发下载，不受文件类型和跨域限制。
• 指定download属性的文件名：修改链接为<a href="https://www.example.com/media/{{file.filePath}}" download="{{file.fileName}}">Download</a>，部分浏览器在明确指定文件名后会触发下载，但对浏览器支持预览的文件（如PDF、图片）不一定生效。
• 避免跨域场景：如果页面域名和文件域名不同，浏览器安全限制会导致download属性失效，此时要么将文件迁移到同域名下，要么通过服务器端代理转发文件请求，同时设置上述响应头。

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