怎么去控制浏览器对资源文件的处理行为

梦里梦外; 2022-05-21 04:44 115阅读 0赞

###     ###

通常当用户打开一个资源的`url`,如果浏览器支持这个格式的文件的情况下，浏览器会尝试去再页面里展示它而不是直接下载。例如一张图片(`jpg, png, gif等`)，几乎所有浏览器都会去将图片在浏览器里面展示。

![example][]

对于压缩格式的文件(`zip, tar, gzip等`)浏览器总是会直接去下载它们，另外一些格式的文件，根据浏览器的不同也会有差异的处理方法，例如`Microsoft Word`文件(`doc, docx`)在`ie`浏览器下通常会在浏览器中展示，但是其他浏览器几乎都会直接下载它，同样的对于`PDF`文件`chrome`有自己的`pdf 转换器`它会尝试去在浏览器上展示该文件。

### 强制下载文件 ###

对于浏览器这种行为，一般情况下是可以接受的，因为用户可以在浏览器显示文件后将文件保存到电脑中，但是一些情况下用户可能希望文件直接被下载而不是在浏览器中被打开，比如有时候用户想去下载一个歌曲，但是浏览器可能回去播放该音频。那么怎么让浏览器强制去下载文件要怎么做呢

#### a标签的download属性 ####

`html5`中 `a` 标签新增了 `download` 属性，该属性指示浏览器下载`url`的内容而不是导航到`url`，因此如果配置了此属性用户会直接下载`url`的内容。作为开发如果想直接触发该事件我们可以直接用代码模拟a标签和点击事件

const link = document.createElement('a');
        link.addEventListener('click', function() {
          link.download = xxx;
          link.href = xxx;
        });
        const e = document.createEvent('MouseEvents');
        e.initEvent('click', false, false);
        link.dispatchEvent(e);

>  *  `download`属性只在同域时候有效，当跨域请求时候该属性将会被忽略。
>  *  当前并非所以浏览器都支持该属性，需要浏览器考虑兼容性。

#### 改变资源格式 ####

浏览器会根据资源类型去判断是否支持，如果支持时会尝试去在页面上展示该资源。浏览器判断资源类型是根据返回头`Content-Type`的值，因此一方面我们在服务端可以设置返回头字段为文件流`'Content-Type': 'application/octet-stream'`，或者根据一些具体资源直接压缩后传输，浏览器不能分析`zip`之类的压缩文件所以会直接去下载它们。

#### 配置Content-Disposition ####

在HTTP场景中，`Content-Disposition` 消息头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

>  *  `inline `默认参数表示消息体会以页面的一部分或者整个页面的形式展示。
>  *  `attachment` 消息体应该被下载到本地，将参数`filename`的值预填为下载后的文件名

因此当我们希望该资源被直接下载时候，我们可以设置返回头`Content-Disposition`的值为`attachment`。

//example
        Content-Disposition: attachment; filename="fname.ext"

这里设置名称时候，要注意下`filename`的编码格式。

#### 用户自己在浏览器设置 ####

浏览器既然定义了该行为，根据浏览器的不同用户可能在设置页面去配置某些格式的文件是否希望浏览器去展示该文件。一些有争议的情况下，你也可以提示用户自己根据需求去设置这些参数。

[example]: /images/20220521/a404eab9b17a42d7a1e53472cbe2f132.png