如何实现点击图标下载S3 URL对应图片而非在浏览器中直接打开

方案1：前端HTML直接修改（同域资源适用） #

直接在你的<a>标签上添加download属性即可，浏览器识别到该属性后会直接触发下载而非预览资源：

<!-- 不需要指定文件名的写法 -->
<a href="@Html.ActualLink(attachment)" download target="_blank" class="icon-download-alt pull-right"></a>

<!-- 需要指定下载后的文件名的写法 -->
<a href="@Html.ActualLink(attachment)" download="自定义文件名.jpg" target="_blank" class="icon-download-alt pull-right"></a>

注意：该属性仅在资源与当前站点同域名时生效，如果你的资源存储在S3这类跨域存储服务中，该属性会被浏览器的跨域安全规则限制失效，需要用下面的服务端配置方案。

方案2：修改存储服务响应头（跨域资源/通用方案） #

浏览器判断是否预览文件的核心依据是响应头的Content-Disposition字段，只要返回该字段值为attachment，无论是什么格式的文件都会直接触发下载。
针对你使用的S3存储，有两种配置方式：

• 固定所有访问都触发下载：上传文件到S3时，直接给文件设置固定的响应头Content-Disposition: attachment，后续所有访问该文件的请求都会触发下载。
• 动态控制是否下载：修改@Html.ActualLink(attachment)方法的S3签名URL生成逻辑，在生成URL时追加response-content-disposition=attachment查询参数，生成的临时URL访问时就会自动返回下载响应头，既不影响其他场景的预览需求，也能满足当前的下载要求。

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