Vue中axios实现二进制流文件下载(保留异常抛出)

下面需注意,ie保存blob对象与chrome firefox是有所不同的,需做一个判断。

import axios from 'axios'
import {Message} from 'element-ui'
// 文件下载,默认post请求.
export function downLoadFile (url, params = {}, fileName = '文件下载', callBack) {
  axios.post(`${url}/`, params, {responseType: 'arraybuffer'}).then(res => {
    if (res.headers['error-message']) {
      // 截取响应头error-message抛出异常信息
      const message = decodeURI(res.headers['error-message']) // 解决中文乱码问题,需后端编码配合。
      Message.error(message)
      return false
    }
    const blob = new Blob([res.data], {type: ''})
    if (window.navigator.msSaveOrOpenBlob) {
      // 兼容IE10及以上
      navigator.msSaveBlob(blob, fileName)
    } else {
      // chrome/firefox
      let aTag = document.createElement('a')
      document.body.appendChild(aTag) // 如果不append进去火狐下载将无反应.
      aTag.download = fileName
      aTag.href = URL.createObjectURL(blob)
      aTag.click()
      document.body.removeChild(aTag)
      URL.revokeObjectURL(aTag.href) // 释放blob对象
      typeof callBack === 'function' ? callBack() : Message.success('下载成功')
    }
  })
}

做这个之前有个问题,后端返回数据转arraybuffer之后,如果抛出异常,就收不到具体的信息。
之前考虑有两种方案,一种前端直接写死,下载出错,但是肯定不合理的,这样抓不到具体的异常信息,第二种与后端约定一个映射表,前端做映射,这样也是比较死板的。
后面查阅一些资料决定,先与后端协商好,将错误信息放在响应头的一个字段里,请求来了先判断响应头,如果这个字段为null,则没有异常再往下执行拿到下载数据,如果异常字段有值则直接抛出异常信息并中断。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,216评论 2 89
  • 项目目标: 1)熟练掌握ajax的使用 (*****) 2)熟悉前后端数据交互(***) 3)熟悉elementu...
    1462a2c022bc阅读 3,318评论 0 0
  • 不得不说的那些app测试的痛点 案例:某拼车软件的iOS版在更新之后,出现了由于定位问题导致不能叫车的惊天Bug。...
    alston123阅读 5,960评论 0 1
  • 三月份我辞去了让我踏入社会的第一份工作,在那里生活了三年,成长了三年,我仍然是一个羽翼不丰满的职场菜鸟。 在安逸的...
    朵先森阅读 6,511评论 0 3
  • 昨天晚上,我们四个投资者第一次单独呆在一起,我们也一起商量了关于后期民宿装修运作的问题。 在我看来,我们这次的沟通...
    小关_dec3阅读 1,454评论 0 0

友情链接更多精彩内容