【文件下载】接口传递文件成功和失败时,前端的处理方式

问题

使用bold类型从后端接口获取文件流,获取成功的时候通过a标签下载;失败的时候,后端返回的是json,这个时候就无法向用户展示后端返回的错误提示信息。

思路

根据返回类型是否为 application/json 区分是否返回成功,若失败,将blob格式转换为json格式。

代码

javascript 复制代码
    this.$http
        .post('/file/export', { exportType: 'xlsx' }, { responseType: 'blob' })
        .then(res => {
          if (res.data.type == 'application/json') {
            const reader = new FileReader()
            reader.readAsText(res.data, 'utf-8')
            reader.onload = () => {
              const result = JSON.parse(reader.result)
              this.$message.error(result.message)
            }
          } else if (res.data.type == 'application/octet-stream') {
            const downloadUrl = window.URL.createObjectURL(new Blob([res.data]))
            const link = document.createElement('a')
            link.href = downloadUrl
            document.body.appendChild(link)
            link.click()
          } else {
            this.$message.error('导出文件类型错误!')
          }
        })
        .catch(error => {
          this.$message.error('导出文件失败!')
        })
相关推荐
IT利刃出鞘18 分钟前
HTML--最简的二级菜单页面
前端·html
yume_sibai25 分钟前
HTML HTML基础(4)
前端·html
给月亮点灯|44 分钟前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰1 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh01131 小时前
LRU 缓存
开发语言·前端·javascript
yangzhi_emo2 小时前
ES6笔记5
前端·笔记·es6
Hexene...3 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See3 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js