vue 浏览器保存后端文件流到本地 | 前端文件流下载文件

前言

本次主要分享一下前端如何保存后端返回文件流到本地，是否为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