vue Axios发送post请求下载文件

vue 11-08 09:18

vue Axios发送get请求下载文件

之前使用vue做项目实现,通过搜索条件查询相关的数据,然后下载数据为excel文件,之前的做法是后端服务使用GET的方式,在URL上面直接传递参数和参数值,后端服务放行,免除了TOKEN。因为所有的都是POST方式请求,把TOKEN验证放在请求头上面。所以功能完成的不理想,想要使用POST发送验证下载文件怎么办?

vue Axios发送post请求下载文件

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


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标签的点击事件从而实现表格下载。

注意:前端请求的时候要加上responseType:'blob',后端要输出的类型为:content-type:application/octet-stream,这样完成下载。

相关推荐