今天在前端工匠群里，看到一个问题（下载一个文件，但是请求头中需要传入token，如何下载文件？如何设置文件类型？），让我们来解决这个问题。下载文件方案（服务器）设置下载标头Content-disposition。良好的兼容性。Content-disposition:attachmentContent-Disposition:attachment;filename=abc.txt（前端）属性触发下载。移动端基本可以放弃，PC端不要考虑低版本的IE。dataurl,base64如何设置downloadheader中a标签的download属性来处理鉴权相关的逻辑？曲奇饼。从cookie中获取用户登录信息，进而判断是否有下载资源的权限。普通计划。标题。从headers中获取用户登录信息，判断是否有下载资源的权限。这一般是cookie的升级，一般是针对CSRF（跨站请求伪造）进行防护的系统架构。但是浏览器默认请求时是不能用的，比如location.href等。网址。从url中获取权限信息，然后进行判断。这似乎是最好的解决方案。比如给一个有效期为五分钟的key，在获取资源的时候直接判断。独立于账户系统，资源可以放在第三方系统中。浏览器ajaxcookie可以设置，可以设置。无法设置标题。可以设置url。可以设置。因为他们的系统架构必须通过header，所以只能使用ajax浏览器下载解决方案。前端ajax下载文件通过ajax请求资源resources转换为blobURL.createObjectURL(blob)；使用download属性获取bloburl，然后点击触发下载。functiondownloadFile(blob,fileName,ext){vara=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=(fileName||Date.now())+(ext?`.${ext}`:'');文档.body.appendChild(a);a.点击（）；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/下载/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',ilnong/www.l.top/download/json/sitemap.json',il'n.top/download/pdf/2018-ebook-engineer.pdf','//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{varxhr=newXMLHttpRequest();xhr.open('get',url)xhr.responseType='blob'xhr.send()xhr.onload=function(){downloadFile(xhr.response,'1'+url)}})functiondownloadFile(blob,fileName,ext){vara=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=(fileName||Date.now())+(ext?`.${ext}`:'');文档.body.appendChild(a);a.点击（）；document.body.removeChild(a);//兼容Firefox}获取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/downloadsitemap.json','//www.lilnong.top/download/pdf/2018-ebook-engineer.pdf','//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{varxhr=newXMLHttpRequest();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'是通过解析response直接获取文件类型responseheader获取的类型是从http的responseheader中分析出来的，我们有两个地方获取通过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-电子书-工程师。pdf','//www.lilnong.top/download/video/friday.mp4']urls.forEach(url=>{varxhr=newXMLHttpRequest();xhr.open('get',url)xhr.responseType='blob'xhr.send()xhr.onload=function(){console.log(url,xhr.getAllResponseHeaders().match(/content-type:([\w/]+)/g))}})微信公众号：前端linong
