vue springboot 文件下载

Vue和Spring Boot一直是web开发的主要技术栈之一，它们也常常被一起使用来构建高质量的web应用程序。当涉及到文件下载功能时，Vue可以轻松地实现异步请求文件链接和监测下载进度的视图组件。而Spring Boot 提供了 FileDownloadController 用于处理下载文件的请求，并根据请求的content-type将文件发送到客户端。

当需要实现文件下载的功能时，首先需要确保我们已经安装好了Vue和Spring Boot框架。对于Vue，我们可以使用axios库来进行http请求，使用element-ui库来实现UI组件，使用vue-router来进行路由配置。对于Spring Boot，我们可以使用Gradle或Maven进行依赖管理。

Vue方面，我们可以通过axios库中的get方法来获取要下载的文件，并开启axios的responseType选项设为“blob”来获取二进制文件格式。对于视图组件，我们可以使用element-ui的el-progress组件来展示下载进度，并触发下载事件。在Vue的路由配置中，我们需要定义一个download路由来响应文件下载请求。

// Vue代码示例
<template>
  <div class="file-download">
    <el-progress :percentage="percent" :stroke-width="8" :status="status"></el-progress>
    <el-button type="primary" @click="downloadFile">Download File</el-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      percent: 0,
      status: ''
    }
  },
  methods: {
    downloadFile () {
      axios({
        url: '/file/download',
        method: 'get',
        responseType: 'blob'
      }).then(response => {
        this.status = 'success'
        const blob = new Blob([response.data])
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = 'file.pdf'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(() => {
        this.status = 'exception'
      })
    }
  }
}
</script>

Spring Boot方面，我们需要实现一个FileDownloadController，来处理文件下载请求。我们可以使用ResponseEntity类来封装文件内容，设置response header的content-type和content-disposition等参数。

// Spring Boot代码示例
@RestController
public class FileDownloadController {
  
  @GetMapping("/file/download")
  public ResponseEntity<byte[]> downloadFile() throws IOException {
    InputStream inputStream = FileDownloadController.class.getResourceAsStream("/static/file.pdf");
    byte[] bytes = IOUtils.toByteArray(inputStream);
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    headers.setContentDisposition(ContentDisposition.builder("attachment").filename("file.pdf").build());
    return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
  }
}

以上就是如何在Vue与Spring Boot的web应用程序中实现文件下载功能的示例代码。当进行文件下载时，Vue的axios组件会发送http请求到Spring Boot后端，并且Spring Boot会将文件内容封装在ResponseEntity类中响应给前端。在Vue中，我们可以使用element-ui来实现下载进度条，并根据下载的结果显示不同的状态。在Spring Boot中，我们需要使用ContentDisposition.builder来处理文件名字并且设置MIME类型。最后，可以通过即时下载所有文件或将文件标记为需要下载的下载器。