vue后台返回格式为二进制流进行文件的下载方式

当我们在处理后台返回的文件下载数据时，有时候会遇到后台返回数据格式为二进制流的情况。这种格式的数据在前端界面上无法直接显示，需要通过特殊的处理方式进行文件下载。下面是完整攻略。

当我们在处理后台返回的文件下载数据时，有时候会遇到后台返回数据格式为二进制流的情况。这种格式的数据在前端界面上无法直接显示，需要通过特殊的处理方式进行文件下载。下面是完整攻略。

1. 后台设置content-type

第一步是需要后台在返回数据时设置content-type为“application/octet-stream”，这个content-type是二进制流格式的标准类型。

下面是Java后台的示例代码：

// 设置响应头Content-Type
response.setContentType("application/octet-stream");
// 设置响应头打开方式为attachment，表示需要进行文件下载
response.setHeader("Content-Disposition", "attachment;filename=" + file.getName());

2. 前端通过axios接收数据

接下来，前端通过axios接收后台返回的二进制流数据。在发送axios请求时需要设置responseType为‘blob’，表示返回的数据为二进制流。

axios({
  method: 'get',
  url: '/fileDownload',
  responseType: 'blob', // 告诉axios需要返回二进制流数据
  params: {
    fileName: 'example.doc'
  }
}).then(response => {
  const blob = new Blob([response.data])
  const fileName = response.headers['content-disposition'].split('=')[1] // 获取文件名
  // 创建一个a标签，利用浏览器内置下载功能进行文件下载
  const downloadLink = document.createElement('a')
  downloadLink.href = URL.createObjectURL(blob)
  downloadLink.download = fileName
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
})

在axios获取数据后，需要将获取到的数据转换成blob对象。之后，我们需要从response header里获取content-disposition变量，来获取文件名。接着，我们创建一个a标签，设置href属性为blob链接，download属性为文件名，然后调用click方法来触发下载。

示例一：下载图片

假设后台返回一张图片，我们先通过axios获取数据，然后将获取到的blob数据转换成URL，将URL赋值给一个img元素的src属性，在页面上渲染该图片。

axios({
  method: 'get',
  url: '/imageDownload',
  responseType: 'blob',
}).then(response => {
  const blob = new Blob([response.data])
  const imgUrl = URL.createObjectURL(blob)
  const img = document.createElement('img')
  img.src = imgUrl
  document.body.appendChild(img)
})

示例二：下载PDF文件

假设后台返回一个PDF文件，我们先通过axios获取数据，然后将获取到的数据转换成blob对象，最后通过设置a标签的href来触发下载。

axios({
  method: 'get',
  url: '/pdfDownload',
  responseType: 'blob',
}).then(response => {
  const blob = new Blob([response.data], {type: 'application/pdf'})
  const fileName = response.headers['content-disposition'].split('=')[1]
  const downloadLink = document.createElement('a')
  downloadLink.href = URL.createObjectURL(blob)
  downloadLink.download = fileName
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
})

以上就是使用Vue进行文件下载的完整攻略，注意，在实际使用过程中还需要进行细节处理，比如服务器响应时间较长时的loading问题、异常处理等。