前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >导出文件时,responseType设置为'arraybuffer'出错?

导出文件时,responseType设置为'arraybuffer'出错?

作者头像
用户2323866
修改2021-06-23 18:06:22
2.5K0
修改2021-06-23 18:06:22
举报
文章被收录于专栏:技术派

1、正常导出的情况:(使用axios发送请求)后端返回二进制文件

api文件

代码语言:javascript
复制
 async download(params) {
  return await  $axios.$post(`url`,params,{ responseType: 'arraybuffer'})
  },

调用api

代码语言:javascript
复制
let formData = new FormData();

formData.append('file',file);//传文件

this.$api.download(formData).then(res=>{
 
const data = new Blob([res],{type:'application/vnd.ms-excel'})
 
const url = URL.createObjectURL(data)
 
const a = document.createElement('a')
 
a.href = url
 
a.download = 'table.xls'
 
a.click()
// 释放这个临时的对象objectUrl
URL.revokeObjectURL(url)
 
}

2、如果数据量过多则后端返回错误信息

由于请求的时候设置了responseType:’arraybuffer’,返回的是数据流,要取得json信息需要进行转换:

代码语言:javascript
复制
let enc = new TextDecoder('utf-8')
let data = JSON.parse(enc.decode(new Uint8Array(res.data)))

错误提示为:(此处简化了)

代码语言:javascript
复制
$axios.onError(error => {
  let enc = new TextDecoder('utf-8')
  let blob = JSON.parse(enc.decode(new Uint8Array(error.response.data)))
  Vue.prototype.$message.error(blob.data);
})

ok,到这里为止就解决问题了。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、正常导出的情况:(使用axios发送请求)后端返回二进制文件
  • 2、如果数据量过多则后端返回错误信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档