vue+ spring boot 下载文件

在Vue和Spring Boot的组合中，实现文件下载可以通过以下步骤进行：

1. 在Vue中，创建一个下载按钮或者其他触发下载的元素，例如：

<button @click="downloadFile">下载文件</button>

2. 在Vue的methods中定义downloadFile方法，该方法将通过Ajax请求从后端获取文件：

methods: {
  downloadFile() {
    axios({
      url: 'http://your-backend-url/download', // 后端提供的下载接口
      method: 'GET',
      responseType: 'blob' // 设置响应类型为blob，以便处理文件
    })
    .then(response => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename.ext'); // 设置下载文件的名称和扩展名
      document.body.appendChild(link);
      link.click();
    })
    .catch(error => {
      console.error(error);
    });
  }
}

3. 在Spring Boot后端中，创建一个下载接口，该接口将返回文件的字节流：

@GetMapping("/download")
public ResponseEntity<Resource> downloadFile() {
  // 从数据库或者文件系统中获取文件的字节流
  byte[] fileBytes = getFileBytes();

  // 创建一个Resource对象，将文件字节流包装起来
  ByteArrayResource resource = new ByteArrayResource(fileBytes);

  // 返回ResponseEntity对象，设置Content-Disposition头部信息，指定文件名和扩展名
  return ResponseEntity.ok()
          .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=filename.ext")
          .body(resource);
}

这样，当用户点击Vue中的下载按钮时，将会触发Ajax请求，后端将返回文件的字节流，前端通过创建一个临时链接来实现文件的下载。