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

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  接口返回的arraybuffer的位置;arrayBuffer流转成blob
var a = document.createElement('a')
var href = window.URL.createObjectURL(blob) // 创建下载的链接
a.href = href

// 注意:下载文件名必须要有 或者自定义或者直接取接口中带回的
a.download = 'export.xls' // 自定义下载后文件名
// 或者取后端返回的文件名 
//a.setAttribute('download', res.headers['content-disposition'].split('filename=')[1])

document.body.appendChild(a)
a.click() // 点击下载
document.body.removeChild(a) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象

 接口返回下载地址,前端实现下载

        if (res.code === 1) {
          const link = document.createElement('a')
          //_blank表示在新窗口打开链接
          link.target = '_blank'
          link.href = res.data.url //接口中下载链接
          // link.setAttribute('download', '文件名字' + Date.now() + '.xls') // 下载文件的名称及文件类型后缀
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) // 下载完成移除元素
        }

下载文件的方法还有其他的可参考同类博客:下载文件_Sunny_lxm的博客-CSDN博客

 下载文件失败时,接口返回json格式,前端判断格式如果是json格式时前端接口弹出错误提示

const _this = this
.then((res) => {
// 文件下载失败时接口返回json格式,弹出报错提示
        if (res.type === 'application/json') {
          const reader = new FileReader()
          reader.onload = function () {
            const message = JSON.parse(reader.result).msg // msg:接口返回错误信息的key值
            _this.$message.error(message) // 将错误信息显示出来
            // ... 执行其他自定义逻辑代码
          }
          reader.readAsText(res)
          return
        }

     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);
     };
});

前端返回的文件流pdf在浏览器新标签页打开

api(params).then((res) => {
        const blob = new Blob([res])
        const blobUrl = URL.createObjectURL(blob)
        const reader = new FileReader()
        reader.onload = function() {
          const pdfData = reader.result
          // 创建新的 Blob 对象
          const pdfBlob = new Blob([pdfData], { type: 'application/pdf' })
          const pdfUrl = URL.createObjectURL(pdfBlob)
          const a = document.createElement('a')
          a.href = pdfUrl
          a.target = '_blank'
          a.click()
          URL.revokeObjectURL(pdfUrl) // 释放URL对象
        }
        reader.readAsArrayBuffer(blob)
      }).catch((err) => {
        console.error(err)
      })

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值