vue后端传文件流转化成blob对象,前端点击下载返回undefined问题

首先，问题的原因是因为没有正确获取服务端传回的文件流，导致在前端的blob对象中无法处理正确的文件数据。此时，我们需要采用axios响应拦截器的方式进行解决。

步骤如下：

步骤一：后端返回流数据

在后端返回的接口中，返回的数据应为二进制流，如下示例：

@GetMapping("/download")
public ResponseEntity<byte[]> downloadFile() throws IOException {
    File file = new File("path/to/file");

    byte[] fileBytes = Files.readAllBytes(file.toPath());

    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", file.getName());
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

    return new ResponseEntity<>(fileBytes, headers, HttpStatus.OK);
}

通过以上代码我们可以获取到文件的byte[]数组，并且将文件进行下载，由于返回二进制数据，因此前端无法直接解析，需要后续处理。

步骤二：前端发起下载请求，获取二进制流

我们可以通过axios在前端发起文件下载的请求并获取到返回的二进制流

const downloadFile = async () => {
  try {
    const response = await axios.get('http://localhost:8080/download', {
      responseType: 'blob'
    });

    let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
    let url = window.URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = 'file.xlsx';
    link.click();
  } catch (error) {
    console.error(error);
  }
}

上述代码使用了axios下载文件时特有的responseType字段，用于指定返回的数据类型为二进制流，然后利用Blob对象对数据进行处理，并且使用a标签进行下载操作。

步骤三：在axios响应拦截器中处理二进制流

在前端获取到二进制流之后，因为返回的数据是在axios的后台处理，所以我们需要在axios的响应拦截器中对后台返回的二进制流数据进行处理。示例代码如下:

axios.interceptors.response.use((res) => {
  if (res.headers['content-type'].indexOf('application/octet-stream') >= 0) {
    let blob = new Blob([res.data], {
      type: 'application/octet-stream'
    });
    res.data = blob;
  }
  return res;
})

在响应拦截器中进行判断，如果返回内容的名称为二进制流类型，即content-type为application/octet-stream的时候，就可以处理response.data变成了二进制数组，而不是undefined.

以上就是本题目的完整攻略，你可以在你的代码里按上述发方法操作，看能不能解决你的问题。