前端Ajax基于流的形式做文件下载

前端基于流的形式做文件下载

首先封装一个ajax请求，设置返回数据类型

function download(url, fileName) {
    var url = url ；
    ajax(url, function (xhr) {
        var filename = fileName // 自定义文件名+后缀
        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()
}

重点来了，动态创建a标签，模拟点击发送请求，接收流数据，注意设置mime类型，将流数据以DOMSring的形式放到href属性中,可以使file或者bolb对象

function downloadFile(content, filename) {
    var a = document.createElement('a')
    var blob = new Blob([content],
        { type: "application/vnd.ms-excel" },//设置mime类型
        // { type: "application/msword" }   
         );
    var url = window.URL.createObjectURL(blob);
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url);//垃圾回收**
}

附上完整代码

function downloadFile(content, filename) {
    var a = document.createElement('a')
    var blob = new Blob([content],
        { type: "application/vnd.ms-excel" },//设置mime类型
        // { type: "application/msword" }   
         );
    var url = window.URL.createObjectURL(blob);
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url);//垃圾回收
}

function download(url, fileName) {
    var url = url // demo图片
    ajax(url, function (xhr) {
        var filename = fileName // 自定义文件名+后缀
        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()
}
export default download;