数据是文件流时,前端下载

前端文件下载有三种,一种是get请求拼接下载地址,a标签直接点击下载;一种是接口返回文件流,然后create一个a标签,模拟点击下载;一种是使用form 表单post请求进行下载
//1.直接使用get请求方式进行下载
window.open(`${url}?${qs.stringify(param)}`, '_blank');
//2.axios(ajax)前端根据返回数据流生成文件下载
axios.post(url, param, {
  responseType: 'blob'
}).then((res) => {
  const blob = res.data;
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = (e) => {
    const a = document.createElement('a');
    a.download = `文件名称.xlsx`;
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}).catch((err) => {
  console.log(err.message);
});
//3.使用form 表单post请求进行下载
const postDownloadFile = (action, param) => {
    const form = document.createElement('form');
    form.action = action;
    form.method = 'post';
    form.target = 'blank';
    Object.keys(param).forEach((item) => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = item;
        input.value = param[item];
        form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

postDownloadFile(url, param);

如果文件流过大,下载过程耗时长,使用axios.post请求时,会出现卡机情况,最好是再新增一个get接口,axios.post的返回值去请求新增的get接口下载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值