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

浏览器是怎么处理文件连接的

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

对于压缩格式的文件(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的编码格式。

用户本身在浏览器设置

浏览器既然定义了该行为，根据浏览器的不一样用户可能在设置页面去配置某些格式的文件是否但愿浏览器去展现该文件。一些有争议的状况下，你也能够提示用户本身根据需求去设置这些参数。