oss pdf浏览器直接下载_阿里云oss直接下载的小技巧

需求：

点击图片的下载链接直接触发浏览器下载，而不是浏览器打开图片。

思路：

1、谷歌浏览器在点击图片链接的时候往往是直接打开图片而不是下载；

2、首先考虑的是在a标签上增加download属性来触发下载，但是由于该属性有跨域限制，导致失效；

3、其次考虑在Response头上增加“Content-Disposition“字段，格式为“Content-Disposition=attachment;filename=abc.png”；

4、由于文件存储在OSS上，给的下载地址是直接从OSS下载的，经过查询阿里云的文档后，发现只要在上传的Form表单中增加Content-Disposition属性，下载时OSS服务器返回的Response中就会自动携带了该字段。

相关资料：

截取自阿里云文档中关于对上传到OSS描述的部分资料：

说明 OSS支持HTTP协议规定的5个请求头：Cache-Control、Expires、Content-Encoding、Content-Disposition、Content-Type。如果上传Object时设置了这些请求头，则该Object被下载时，相应的请求头值会被自动设置成上传时的值。

名称类型是否必选描述

Authorization

字符串

否

表示请求本身已被授权，详情请参见RFC2616。

通常情况下Authorization是必选请求头，但如果采用了URL包含签名，则不用携带该请求头。详情请参见在URL中包含签名。

默认值：无

Cache-Control

字符串

否

指定该Object被下载时网页的缓存行为，详情请参见RFC2616。

默认值：无

Content-Disposition

字符串

否

指定该Object被下载时的名称，详情请参见RFC2616。

默认值：无

截取自MSDN中关于对Content-Disposition描述的部分资料：

在常规的HTTP应答中，Content-Disposition 响应头指示回复的内容该以何种形式展示，是以内联的形式(即网页或者页面的一部分)，还是以附件的形式下载并保存到本地。

作为消息主体中的消息头

在HTTP场景中，第一个参数或者是inline(默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示)，或者是attachment(意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将filename的值预填为下载后的文件名，假如它存在的话)。

Content-Disposition: inline

Content-Disposition: attachment

Content-Disposition: attachment; filename="filename.png"

代码：

/** formData为上传的表单对象 **/

formData.append('Content-Disposition', 'attachment;filename=' + file.name); // file.name就是要下载的文件的名称

实现的效果：

charles抓包显示Response中携带了该字段：

在谷歌浏览器下表现为直接下载而不是打开图片：