关于javascript:如何通过-response-的头信息获取文件类型

9次阅读

共计 4567 个字符，预计需要花费 12 分钟才能阅读完成。

明天在 前端工匠 的群里，看到了一个问题（下载文件，然而申请头中须要传递 token，如何下载文件？怎么设置文件类型？），咱们来解决一下这个问题。

（服务端）设置下载头 Content-disposition。兼容性好。
Content-disposition: attachment
Content-Disposition: attachment; filename=abc.txt
（前端）个性触发下载。挪动端根本能够放弃，PC 端别思考低版本 IE。
1. dataurl，base64 设置下载头
2. a 标签的 download 属性

cookie。从 cookie 获取用户登录信息，而后判断是否有下载资源的权限。
普普通通的计划。
headers。从 headers 获取用户登录信息，而后判断是否有下载资源的权限。
这种个别是 cookie 的降级，个别是一些防护 CSRF（跨站申请伪造）的零碎架构。
然而浏览器默认申请时无奈应用，比方 location.href 等形式。
url。从 url 获取权限信息，而后判断。
感觉是最好的计划，比如说给一个 key，有效期为五分钟，获取资源的时候直接判断。
和账号零碎独立开，能够把资源放在第三方的零碎。

	浏览器	ajax
cookie	能够设置	能够设置
header	不能够设置	能够设置
url	能够设置	能够设置

因为他们的零碎架构必须传递 header，所以只能用 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);// 兼容火狐
}

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 获取文件类型

从 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))
    }
})

正文完