現(xiàn)在的大多數(shù)的后臺管理系統(tǒng)都是以展示數(shù)據(jù)，管理流程為主，時不時的要導(dǎo)出數(shù)據(jù)，下載圖片等。這時候下載功能就變得很常見，下面讓我們來看看使用js實(shí)現(xiàn)的下載方法

<div onclick="download()">下載</div>

function downloadFile(content, filename) {
    var a = document.createElement('a')
    var blob = new Blob([content])
    var url = window.URL.createObjectURL(blob)
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url)
}

function download() {
    var url = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=20550366,3650143321&fm=26&gp=0.jpg' // demo圖片
    ajax(url, function(xhr) {
        var filename = 'xxx.' + url.replace(/(.*\.)/, '') // 自定義文件名+后綴
        downloadFile(xhr.response, filename)
    }, {
        responseType: 'blob'
    })
}

function ajax(url, callback, options) {
    window.URL = window.URL || window.webkitURL
    var xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    if (options.responseType) {
        xhr.responseType = options.responseType
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr)
        }
    }
    xhr.send()
}