下载文件相关设置

一般都做过下载文件的需求，如果一些常见的文件类型(html,音频，图片，压缩包，文档pdf、word等)的下载,本文在chrome,火狐，safari和微信浏览器做的相关测试。

本文中访问的文件是：download文件夹中的

    a.html
    a.mp3
    a.zip
    p.pdf
    pada.jpeg

用法

直接在当前或重新打开窗口访问文件路径

 window.open(filepath)
 location.href=filepath;
 <a href="filepath"></a>

测试结果:

chrome、火狐,safari除了zip文件外都在浏览器中打开,zip文件在chrome和safari中直接被下载，火狐是询问下载
微信浏览器其他文件都直接打开，pdf是用默认浏览器打开(可能自身打不开),zip文件点击没反应

很明显，这种办法不能很好地实现需求，H5中a标签可以添加download属性(有些浏览器不兼容，ie)

 <a href="filepath" download></a>

测试结果:

chrome,safari都直接被下载
火狐除了zip文件外都在浏览器中打开,火狐是询问下载
微信浏览器所有文件点击没反应

显然这个办法也不是很实用，经过google后发现可以通过设置请求的content-disposition属性来控制浏览器对于文件的行为

Content-Disposition 属性

在普通的HTTP响应中 Content-Disposition可以作为响应头用来表明该响应内容是要在浏览器中内联(inline)显示，如作为一个网页或者网页的一部分展示,还是作为附件(attachment)，被下载和本地保存。
在内容类型为multipart/form-data的响应体,Content-Disposition可以作为普通头部属性，用来作为文件流报文的子组成部分来提供响应相应的信息。这些子组成部分，被Content-Type中的boundary字段分割，他们对报文实体没有影响。

在服务器端进行设置(node代码）

        if(filePath.indexOf('download') > -1){
            console.log('okk');
            await ctx.set('Content-disposition','attachment');
        }

测试结果:

chrome,safari都直接被下载
火狐都是询问下载
微信浏览器所有文件点击没反应

可以看到除了微信浏览器其他浏览器都能正确的下载文件

解决方法

通过相关搜索发现微信屏蔽了内置浏览器的下载功能(真是无语,你一个浏览器能改变用户习惯么),所以看到很多app或软件在微信浏览器打开的时候提示在别的浏览器打开该页面。

总结

下载文件方面前端能做的工作有限，需要后端同学在需要下载的文件请求中设置content-diposition:attachment来告知浏览器正确下载文件。