axios导出下载文件时,显示文件损坏,无法打开。

开始本来是基于表格组件 调用组件方法默认导出,但是这种方式只支持 get 请求方式,需求想利用post方式传参,过滤导出条件。参照了好多资料

整理出一套 基于前后端的文件下载,接口传参,如下图:

接口响应返回值是字节流(完全不知道该如何处理,硬着头皮百度照着方法去解析返回来的响应值):

发现下载的文件损坏,打不开:

起初一直以为是在代码中字节流转换的时候有问题,一直修改代码 是type类型不对

 let blob = new Blob([res], {
        type:
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
      })
      if (window.navigator.msSaveOrOpenBlob) {
        //兼容 IE & EDGE
        navigator.msSaveBlob(
          blob,
          '发票邮寄-' + moment().format('YYYYMMDD') + '.xlsx',
        )
      } else {
        var link = document.createElement('a')
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        link.href = url.createObjectURL(blob)
        //命名下载名称
        link.download = '发票邮寄-' + moment().format('YYYYMMDD') + '.xlsx'
        //点击触发下载
        link.click()
        //下载完成进行释放
        url.revokeObjectURL(link.href)

参考了资料才发现是没有设置responseType,

Axios官方文档是这样描述的:responseType 表示服务器响应的数据类型,可以是 'arraybuffer'  , 'blob' ,  'document'  ,    'json', 'text', 'stream'
 responseType: 'json', // 默认的

最后在封装的axios 请求中加入

亲测arraybuffer,blob都可生效。。。只能用于文件,图片,音频,视频等传输,正常json作为返回值,会报错。

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值