明天在前端工匠的群里，看到了一个问题（下载文件，然而申请头中须要传递 token，如何下载文件？怎么设置文件类型？），咱们来解决一下这个问题。
下载文件计划
- （服务端）设置下载头
Content-disposition。兼容性好。Content-disposition: attachmentContent-Disposition: attachment; filename=abc.txt （前端）个性触发下载。挪动端根本能够放弃，PC 端别思考低版本 IE。
- dataurl，base64 设置下载头
- a 标签的 download 属性
如何解决鉴权相干逻辑？
- cookie。从 cookie 获取用户登录信息，而后判断是否有下载资源的权限。
普普通通的计划。 - headers。从 headers 获取用户登录信息，而后判断是否有下载资源的权限。
这种个别是 cookie 的降级，个别是一些防护 CSRF （跨站申请伪造）的零碎架构。
然而浏览器默认申请时无奈应用，比方location.href等形式。 - url。从 url 获取权限信息，而后判断。
感觉是最好的计划，比如说给一个key，有效期为五分钟，获取资源的时候直接判断。
和账号零碎独立开，能够把资源放在第三方的零碎。
| 浏览器 | ajax | |
|---|---|---|
| cookie | 能够设置 | 能够设置 |
| header | 不能够设置 | 能够设置 |
| url | 能够设置 | 能够设置 |
因为他们的零碎架构必须传递 header，所以只能用 ajax 这些浏览器下载计划了。
前端 ajax 下载文件
- 通过
ajax申请资源 - 资源转换为
blob URL.createObjectURL(blob);获取 bloburl- 应用
download属性，而后通过click触发下载。
function downloadFile(blob, fileName, ext){ var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = (fileName || Date.now()) + (ext?`.${ext}`:''); document.body.appendChild(a); a.click(); document.body.removeChild(a);// 兼容火狐}urls = [ '//www.lilnong.top/static/html/_template.html', '//www.lilnong.top/static/css/normalize-8.0.0.css', '//www.lilnong.top/static/img/20190515/index-cir4.png', '//www.lilnong.top/static/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/static/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/static/json/sitemap.json', '//www.lilnong.top/static/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/static/video/friday.mp4', '//www.lilnong.top/download/html/_template.html', '//www.lilnong.top/download/css/normalize-8.0.0.css', '//www.lilnong.top/download/img/20190515/index-cir4.png', '//www.lilnong.top/download/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/download/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/download/json/sitemap.json', '//www.lilnong.top/download/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{ var xhr = new XMLHttpRequest(); xhr.open('get', url) xhr.responseType = 'blob' xhr.send() xhr.onload = function(){ downloadFile(xhr.response, '1'+ url) }})function downloadFile(blob, fileName, ext){ var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = (fileName || Date.now()) + (ext?`.${ext}`:''); document.body.appendChild(a); a.click(); document.body.removeChild(a);// 兼容火狐}获取 ajax 下载的文件类型
urls = [ '//www.lilnong.top/static/html/_template.html', '//www.lilnong.top/static/css/normalize-8.0.0.css', '//www.lilnong.top/static/img/20190515/index-cir4.png', '//www.lilnong.top/static/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/static/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/static/json/sitemap.json', '//www.lilnong.top/static/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/static/video/friday.mp4', '//www.lilnong.top/download/html/_template.html', '//www.lilnong.top/download/css/normalize-8.0.0.css', '//www.lilnong.top/download/img/20190515/index-cir4.png', '//www.lilnong.top/download/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/download/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/download/json/sitemap.json', '//www.lilnong.top/download/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{ var xhr = new XMLHttpRequest(); xhr.open('get', url) xhr.responseType = 'blob' xhr.send() xhr.onload = function(){ // console.log(url, xhr.response, xhr); console.log(url, xhr.response); }})能够看到，咱们设置 responseType = 'blob' 间接就能够通过 type 获取文件类型
通过解析 response 响应头获取类型
从 http 的响应头来剖析，咱们有两个中央能够获取。
- 通过
content-type来获取 - 通过
Content-Disposition来获取
urls = [ '//www.lilnong.top/static/html/_template.html', '//www.lilnong.top/static/css/normalize-8.0.0.css', '//www.lilnong.top/static/img/20190515/index-cir4.png', '//www.lilnong.top/static/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/static/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/static/json/sitemap.json', '//www.lilnong.top/static/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/static/video/friday.mp4', '//www.lilnong.top/download/html/_template.html', '//www.lilnong.top/download/css/normalize-8.0.0.css', '//www.lilnong.top/download/img/20190515/index-cir4.png', '//www.lilnong.top/download/fontmin/5d1e8557b8e311dae9ff17ee45563a27.svg', '//www.lilnong.top/download/fontmin/52ea7c14fd3e6a77587a50d251b0438a.ttf', '//www.lilnong.top/download/json/sitemap.json', '//www.lilnong.top/download/pdf/2018-ebook-engineer.pdf', '//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{ var xhr = new XMLHttpRequest(); xhr.open('get', url) xhr.responseType = 'blob' xhr.send() xhr.onload = function(){ console.log(url, xhr.getAllResponseHeaders().match(/content-type: ([\w/]+)/g)) }})