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

December 17, 2023
测试
测试
测试
测试
2 分钟阅读

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

api文件

 async download(params) {
  return await  $axios.$post(`url`,params,{ responseType: 'arraybuffer'})
  },

调用api

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信息需要进行转换:

let enc = new TextDecoder('utf-8')
let data = JSON.parse(enc.decode(new Uint8Array(res.data)))

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

$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,到这里为止就解决问题了。

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多