How to get the file type from the response header?

Time:2021-3-31

Today inFront end craftsmanIn the group of, I see a problem (download the file, but the token needs to be passed in the request header. How to download the file? How to set the file type?) Let’s solve this problem.

Download File scheme

  1. (server) set download headerContent-disposition. Good compatibility.
    Content-disposition: attachment
    Content-Disposition: attachment; filename=abc.txt
  2. (front end) feature triggers download. Mobile terminal can give up, PC terminal don’t consider low version ie.

    1. Dataurl, Base64 set download header
    2. Download attribute of a tag

How to deal with authentication related logic?

  1. cookie。 Get the user login information from the cookie, and then judge whether there is permission to download resources.
    A common solution.
  2. headers。 Get the user login information from the headers, and then judge whether there is permission to download resources.
    This is generally the upgrade of cookie, and is generally some system architecture to protect CSRF (Cross Site Request Forgery).
    However, it cannot be used when the browser requests by default, such aslocation.hrefAnd so on.
  3. url。 Get the permission information from the URL, and then judge.
    I think it’s the best solution. For example, give a key, which is valid for five minutes. When you get resources, you can judge directly.
    It is independent of the account system, and can put resources in the third-party system.
browser ajax
cookie Can be set Can be set
header Can’t set Can be set
url Can be set Can be set

Because their system architecture must pass the header, we can only use ajax to download the scheme.

Front end Ajax download file

  1. adoptajaxRequest resources
  2. Resource conversion toblob
  3. URL.createObjectURL(blob);Get bloburl
  4. usedownloadProperty, and then through theclickTrigger download.
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) ; // compatible with Firefox
}

How to get the file type from the response header?

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) ; // compatible with Firefox
}

Get the file type downloaded by 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);
    }
})

How to get the file type from the response header?

As you can see, we set theresponseType = 'blob'You can get the file type directly through type

Get the type by parsing the response header

From the response header of HTTP, we can get it in two places.

  1. adoptcontent-typeTo get
  2. adoptContent-DispositionTo get
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))
    }
})

How to get the file type from the response header?

WeChat official account: front-end Linong

How to get the file type from the response header?

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]