axios下载流文件报错文件已损坏

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

vue使用element的el-button组件从后台下载文件,开始本来是基于表格组件 调用组件方法默认导出，但是这种方式只支持 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作为返回值，会报错。