JS Ajax实现文件下载功能

实现文件流转blob对象下载

download("http://.....exportData", {name: "小明", age: 18});

function download(url, data) {
    var xhr = new XMLHttpRequest(); //ajax的技术核心是XMLHttpRequest对象
    xhr.open("post", url);
    xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8"); //设置请求头
    xhr.responseType = "blob"; //返回类型blob
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                var data = xhr.response;
                var defaultFileName = xhr.getResponseHeader("Content-Disposition").split(";")[1].split("filename=")[1]; //从响应头中获取文件名
                var filename = decodeURI(defaultFileName); //解码
                //判断浏览器类型
                const uA = window.navigator.userAgent;
                const isIE = /msie\s|trident\/|edge\//i.test(uA) && !!(
                            "uniqueID" in document ||
                            "documentMode" in document ||
                            "ActiveXObject" in window ||
                            "MSInputMethodContext" in window
                          );
                 const blob = new Blob([data], {type: data.type});
                 if (isIE) {
                     navigator.msSaveBlob(blob, filename); // 兼容IE
                 } else {
                     const a = document.createElement("a");
                     const url = window.URL.createObjectURL(blob);
                     a.href = url;
                     a.download = filename;
                     a.click();
                     window.URL.revokeObjectURL(url);
                 }
             }
         }
    };
    xhr.onerror = function() {
        alert("下载失败")
    };
    // 发送ajax请求
    xhr.send(JSON.stringify(data)); // 数据格式，看具体接口情况决定
}

注意：下载文件名最好用后端返回的，如果文件名后缀不一致，打开下载文件，会提示以下错误信息。