美文网首页前端之美-VueJs
Axios发送post请求下载文件

Axios发送post请求下载文件

作者: 匆匆岁月 | 来源:发表于2018-07-03 16:09 被阅读995次

    发送post请求下载文件

    先说一下背景:这是一个以vue作为框架并用Axios来发送http请求的项目。我想要实现用axios来发送post请求,然后服务器会返回的response是一个文件流,我希望能将这个文件流写入excel,从而实现该excel文件的下载。

    在网上查阅了相关资料后,我在Axios官方文档给出的一个不大完整的示例中看到一种基于node原生模块fs的处理方案,我考虑到是否可以采用这种方式来处理我接受到的文件流,可是经过尝试,发现行不通。

    以下是我亲试可以实现的一种方案:

    exportData () {
            const form = this.getSearchForm() // 要发送到后台的数据
            axios({ // 用axios发送post请求
              method: 'post',
              url: '/user/12345', // 请求地址
              data: form, // 参数
              responseType: 'blob' // 表明返回服务器返回的数据类型
            })
              .then((res) => { // 处理返回的文件流
                const content = res
                const blob = new Blob([content])
                const fileName = '测试表格123.xls'
                if ('download' in document.createElement('a')) { // 非IE下载
                  const elink = document.createElement('a')
                  elink.download = fileName
                  elink.style.display = 'none'
                  elink.href = URL.createObjectURL(blob)
                  document.body.appendChild(elink)
                  elink.click()
                  URL.revokeObjectURL(elink.href) // 释放URL 对象
                  document.body.removeChild(elink)
                } else { // IE10+下载
                  navigator.msSaveBlob(blob, fileName)
                }
            })
          }
    

    这里用了Blob对象,上面的写法就是用从服务器接收到的文件流(content-type:application/octet-stream)创建了一个blob对象,并使用该blob 创建一个指向类型数组的URL,将该url作为a标签的链接目标,然后去触发a标签的点击事件从而实现表格下载。

    相关文章

      网友评论

        本文标题:Axios发送post请求下载文件

        本文链接:https://www.haomeiwen.com/subject/khhjuftx.html