前端下载骚操作

a 标签

let a = document.createElement('a');
a.download = '文件名称';
a.style.display = 'none';
a.href = '/static/files/temp.xls';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

tips：

1. 改种方式可以下载本地资源文件，vue项目下文件放在 static 文件夹下，vue3.0放在 public 文件夹下
2. 如果下载本地文件注意 href 需要写服务器中的文件路径，此处我写的是开发路径
3. 如果 nginx 中配置过滤，否则默认请求会走后台接口而不是服务器中的本地资源
4. 不可加鉴权头（一般只有使用 ajax 才能够加鉴权头，否则都不行）
5. 如果你点击下载是一个文件数组则不可用该方法，浏览器的自我保护机制会使得你只能下载最后一个文件。

location.href

location.href = '/pages/export?userId=uij12893901';

tips:

1. 这种最简单，一般点击导出实现 excel 文件或者下载操作都是使用该方法
2. 不可加鉴权头

window.open

window.open(url,'_self');

tips:

1. 如果第二个参数穿 _self 则不打开新界面，默认是打开一个新界面
2. 无法增加请求头
3. 还有一点需要注意，就是 window.open 在异步成功回掉中使用会失效（这一点大家可以试一下，我听人说的没尝试过）

iframe

let iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = 'http://wasacscas';        // 文件地址
document.body.appendChild(iframe);

tips:

1. 这种一般来说是比较完善的请求方式
2. 可以用来下载多个文件，如果是下载文件数组可以用 iframe 解决，给 iframe 指定 src 就会自动发起请求
3. 不可加鉴权头

form表单提交

$("#downloadform").remove(); 
var form = $("
");//定义一个form表单 
form.attr("id", "downloadform"); 
form.attr("style", "display:none"); 
form.attr("target", ""); 
form.attr("method", "post"); 
form.attr("action", path);
for(var key in params){
    var input1 = $("");
    input1.attr("type", "hidden");
    input1.attr("name", key);
    input1.attr("value", params[key]);
    form.append(input1);
}
$("body").append(form);//将表单放置在web中 
form.submit();//表单提交()

tips: 该方法用的比较少，也是动态下载一个例子

ajax请求

还有一种就是使用 ajax 请求，可以增加鉴权头等等

function download() {
    var url = 'download/?filename=aaa.txt';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);        // 也可以使用POST方式，根据接口
    xhr.responseType = "blob";    // 返回类型blob
    // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
    xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
            // 返回200
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
            reader.onload = function (e) {
                // 转换完成，创建一个a标签用于下载
                var a = document.createElement('a');
                a.download = 'data.xlsx';
                a.href = e.target.result;
                $("body").append(a);    // 修复firefox中无法触发click
                a.click();
                $(a).remove();
            }
        }
    };
    // 发送ajax请求
    xhr.send()
}

tips：

1. 这里需要注意的就是后台需要配合处理，返回类型后台需要支持并且后台实际返回格式需要注意（不然很容易出现下载文件乱码）
2. 可以加鉴权头