Vue3 与 Spring Boot 实现文件下载功能

后端 (Spring Boot)

1. 创建控制器处理文件下载：

import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.net.MalformedURLException;
import java.nio.file.Path;
import java.nio.file.Paths;

@RestController
public class FileDownloadController {

    @GetMapping("/download/{filename}")
    public ResponseEntity<Resource> downloadFile(@PathVariable String filename) {
        try {
            Path filePath = Paths.get("文件存储路径").resolve(filename).normalize();
            Resource resource = new UrlResource(filePath.toUri());

            if (resource.exists()) {
                return ResponseEntity.ok()
                        .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename="" + resource.getFilename() + """)
                        .body(resource);
            } else {
                return ResponseEntity.notFound().build();
            }
        } catch (MalformedURLException e) {
            return ResponseEntity.badRequest().build();
        }
    }
}

2. 配置文件存储路径：

确保 文件存储路径 是你实际存放文件的目录。

前端 (Vue3)

1. 在Vue组件中实现文件下载：

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

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: '/api/download/filename.txt', // 替换为实际文件名
        method: 'GET',
        responseType: 'blob', // 确保接收二进制数据
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.txt'); // 替换为实际文件名
        document.body.appendChild(link);
        link.click();
        link.remove();
      }).catch(error => {
        console.error("文件下载失败", error);
      });
    },
  },
};
</script>

2. 注意事项：

• 确保后端 API 路径正确，前端请求时应当加上相应的前缀，比如 /api/download/{filename}。
• 在实际应用中， filename.txt 应该动态替换为用户需要下载的文件名。

这段代码展示了如何在 Spring Boot 中创建一个简单的文件下载接口，并在 Vue3 前端中使用 axios 发起请求，接收文件并下载。