后端 (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 发起请求,接收文件并下载。