vue axios下载文件blob,后端返回文件流和错误信息的区分,自定义响应头拿不到
首先下载axios要传递请求头的数据headers: { 'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild' },responseType: 'blob',得到请求结果时// 处理下载失败的问题,data是得
·
首先下载axios要传递请求头的数据
headers: { 'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild' },
responseType: 'blob',
得到请求结果时
// 处理下载失败的问题,data是得到的请求结果
if (data.type === 'application/json') {
const reader = new FileReader()
reader.onload = function () {
const message = JSON.parse(reader.result).bizMsg
Message.error(message) // 将错误信息显示出来
}
reader.readAsText(data)
return
}
const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
const a = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
a.href = href
a.download = filename // 下载后文件名
document.body.appendChild(a)
a.click() // 点击下载
document.body.removeChild(a) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
如果说后端返回的文件流和错误信息得到的blob.type都为application/json,
重点,这个要找后端,让他修改字段文件流的类型一定不是application/json
补充axios获取后端自定义的响应头
需要后端在header中添加 Access-Control-Expose-Headers 信息,把自定义的属性暴漏出来,前端才可以拿到
// Content-Disposition自定义属性名称
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
更多推荐
已为社区贡献1条内容
所有评论(0)