前言

本次主要分享一下前端如何保存后端返回文件流到本地,是否为vue项目均可。

关键点:

  • axios 
  • URL.createObjectURL

实现思路:

      首先设置axios的响应类型为  responseType: 'blob'   ,也就把流文件转换成blob对象;其次用window.URL.createObjectURL()方法生成一个blob对象的url(暂且这么描述吧,主要是太菜了);最后用a标签调用浏览器的文件下载。

      大概就是这样的思路吧,上代码。

配置axios返回类型:

//这里axios只做演示,实际使用需要二次封装的

axios.post('http://xxx.com/file, {id:1}, { responseType: 'blob' })
      .then(res => {
       saveFile(res,'xxx.xls') //这里要传入文件名以及文件后缀
      })
      .catch(err => {
        
      })

export function saveFile (data, name) {
  try {
    const blobUrl = window.URL.createObjectURL(data)
    const a = document.createElement('a')
    a.style.display = 'none'
    a.download = name
    a.href = blobUrl
    a.click()
    
  } catch (e) {
    alert('保存文件出错')
  }
}

或者不配置axios返回类型,使用Blob 构造函数转换也是一样的

// 不配置axios
axios.post('http://xxx.com/file, {id:1})
      .then(res => {

       // 这里使用blob做一个转换
       const blob = new Blob([res])

       saveFile(blob,'xxx.xls') //这里要传入文件名以及文件后缀
      })
      .catch(err => {
        
      })

export function saveFile (data, name) {
    ....
}

两种方法是一样的,配置axios 响应类型后,axios自动帮你转换类型而已,至于是手动转还是自动看个人喜好了。

 

总结:

      1.后端返回的文件流转换成blob对象

       2.使用window.URL.createObjectURL()方法将blob转换成可下载连接

       3.使用a标签下载文件保存本地,下载文件也可以用location.href ,可能体验不是太友好就不介绍了。

 

THE END

 

 

 

Logo

前往低代码交流专区

更多推荐