后台返回文件流Blob或者二进制,前端进行处理下载文件;接口返回下载地址,前端实现下载;文件返回失败时接口返回json,前端需要弹出错误提示;前端返回的文件流pdf在浏览器新标签页打开

本文详细介绍了前端如何处理和下载不同类型的文件,包括Blob、二进制ArrayBuffer、PDF等格式,通过实例演示了如何使用JavaScript进行文件流的读取、转换及下载,同时提供了错误处理策略。

Blob下载 

.post('xxxxx接口地址')
.send(obj)//需要的参数
.responseType('blob');//重点!!!!!处理文件流

前端页面处理

.then((res) => {
     const blob = res.body;//接口返回的文件流
     const reader = new FileReader();
     reader.readAsDataURL(blob);
     reader.onload = (e) => {
              const a = document.createElement('a');
              a.download = `文件名称.xls`;//看需求是下载什么文件可以改后缀
   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; 
  //name=\"attachment\"; filename=\"20181211191944.zip\"",
               a.href = e.target.result;
               document.body.appendChild(a);
               a.click();
               document.body.removeChild(a);
     };
});

 二进制arraybuffer下载

// 请求接口是注意要添加接收形式
.post('xxxxx接口地址')
.send(obj)//需要的参数
responseType: 'blob', // 注意!





const blob = new Blob([res.data]) //res.data  接口返回的arra
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值