【Vue】post请求导出二进制数据流

往常在做excel导出时，一般使用get请求，然后拼接字段通过打开链接的方式就能是实现导出功能。这个方法很方便但有个弊端——在浏览器地址栏能导出的行数是有限的。此时，就需要用到POST方式导出了。

最近做导出功能拿到这样的一个这样的后端返回数据： 一开始看到一脸懵逼，而后端只留下一句用post请求。。。

网上查阅了些资料，了解到这个乱码状的返回叫二进制数据流，最后顺藤摸瓜找到了方法实现导出功能。

我在axios上实现的，先上代码

      this.$http({
        method: 'post',
        url: 'https://***.******.com/api/admin.user_data/clients/get',
        data: qs.stringify(data),
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      })
      .then((res) => {
        console.log(res.data)
        // 假设res表示后端发来的流数据
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }),
          link = document.createElement('a'),
          href = window.URL.createObjectURL(blob)
        link.href = href
        link.download = '客户列表'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(href)
      })
      .catch((error) => {
        console.log(error)
      }) 

这个导出功能用到了一个blob，

请求前设置的responseType为bolb，我对它理解，它相当于是把后端反过来的二进制数字流转成了一个这样的文件流

这也是console.log(res.data)输出的结果，请求后再通过构造函数Blob获取到转换后的文件流。附上MDN上对Blob的介绍链接developer.mozilla.org/zh-CN/docs/…

之后的代码就是获取到文件后的下载处理，最后成功实现导出啦。