vue文件下载后端实现
后端实现文件下载的常见方法
在Vue项目中，后端实现文件下载通常通过API接口返回文件流或URL。以下是几种常见后端技术栈的实现方式：
Spring Boot实现
使用ResponseEntity返回文件流：
@GetMapping("/download")
public ResponseEntity<Resource> downloadFile() throws IOException {
File file = new File("path/to/file.pdf");
InputStreamResource resource = new InputStreamResource(new FileInputStream(file));
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"")
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.contentLength(file.length())
.body(resource);
}Node.js Express实现
使用res.download方法：
const express = require('express');
const fs = require('fs');
const path = require('path');
app.get('/download', (req, res) => {
const filePath = path.join(__dirname, 'files', 'document.pdf');
res.download(filePath, 'custom-filename.pdf', (err) => {
if (err) console.error(err);
});
});Django实现
使用FileResponse：
from django.http import FileResponse
import os
def download_file(request):
file_path = '/path/to/file.pdf'
if os.path.exists(file_path):
return FileResponse(open(file_path, 'rb'), as_attachment=True, filename='custom-name.pdf')
return HttpResponseNotFound('File not found')前端调用方式
Vue组件中通过axios调用下载接口：
axios({
method: 'get',
url: '/api/download',
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.ext');
document.body.appendChild(link);
link.click();
link.remove();
});处理大文件下载
对于大文件下载，建议实现分块下载：
// Spring Boot分块下载示例
@GetMapping("/download-chunked")
public ResponseEntity<StreamingResponseBody> downloadLargeFile() {
File file = new File("large-file.iso");
StreamingResponseBody stream = out -> {
try (InputStream in = new FileInputStream(file)) {
byte[] buffer = new byte[1024];
int bytesRead;
while ((bytesRead = in.read(buffer)) != -1) {
out.write(buffer, 0, bytesRead);
}
}
};
return ResponseEntity.ok()
.header("Content-Disposition", "attachment; filename=" + file.getName())
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.body(stream);
}安全注意事项
实现文件下载时需考虑：
- 验证用户权限
- 防止目录遍历攻击
- 限制下载速率防止服务器过载
- 对文件名进行安全过滤
// 安全示例：防止目录遍历
@GetMapping("/safe-download")
public ResponseEntity<Resource> safeDownload(@RequestParam String filename) {
Path safePath = Paths.get("/secure/download/dir").resolve(filename).normalize();
if (!safePath.startsWith("/secure/download/dir")) {
throw new AccessDeniedException("Invalid file path");
}
// 其余下载逻辑...
}
