目录
[后端(Spring Boot)](#后端(Spring Boot))
[前端(HTML + JavaScript)](#前端(HTML + JavaScript))
前言
下面是一个简单的 Java Spring Boot 实现下载 ZIP 压缩包的示例,包含前端和后端代码。
后端(Spring Boot)
-
创建 Spring Boot 项目 使用 Spring Initializr 创建一个新的 Spring Boot 项目,选择 Web 和 Lombok 依赖。
-
Controller 实现
创建一个控制器,处理 ZIP 文件的生成和下载请求:
java
import org.springframework.core.io.ByteArrayResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.zip.ZipEntry;
import java.util.zip.ZipOutputStream;
@RestController
public class FileDownloadController {
@GetMapping("/download/zip")
public ResponseEntity<ByteArrayResource> downloadZip() {
try (ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
ZipOutputStream zipOutputStream = new ZipOutputStream(byteArrayOutputStream)) {
// 添加文件到 ZIP
addToZip(zipOutputStream, "file1.txt", "This is the content of file1.");
addToZip(zipOutputStream, "file2.txt", "This is the content of file2.");
zipOutputStream.finish();
ByteArrayResource resource = new ByteArrayResource(byteArrayOutputStream.toByteArray());
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=files.zip")
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.body(resource);
} catch (IOException e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}
}
private void addToZip(ZipOutputStream zipOutputStream, String fileName, String content) throws IOException {
ZipEntry zipEntry = new ZipEntry(fileName);
zipOutputStream.putNextEntry(zipEntry);
zipOutputStream.write(content.getBytes());
zipOutputStream.closeEntry();
}
}
解释:
- 创建一个
/download/zip
路径的 GET 请求处理方法。 - 使用
ByteArrayOutputStream
和ZipOutputStream
生成 ZIP 文件。 - 使用
ZipEntry
添加文件内容到 ZIP 中。 - 返回
ByteArrayResource
作为响应体,并设置适当的响应头。 - application.properties 确保在
src/main/resources/application.properties
中配置了必要的设置(如服务器端口等)。
前端(HTML + JavaScript)
在前端,你可以使用简单的 HTML 和 JavaScript 来触发下载:
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download ZIP</title>
</head>
<body>
<h1>Download ZIP Example</h1>
<button id="downloadBtn">Download ZIP</button>
<script>
document.getElementById('downloadBtn').addEventListener('click', function () {
fetch('/download/zip')
.then(response => {
if (response.ok) {
return response.blob(); // 获取 Blob 数据
}
throw new Error('Network response was not ok.');
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'files.zip'; // 指定下载的文件名
document.body.appendChild(a);
a.click(); // 模拟点击下载
window.URL.revokeObjectURL(url); // 释放 URL 对象
})
.catch(error => console.error('There was a problem with the fetch operation:', error));
});
</script>
</body>
</html>
解释:
- 创建一个按钮来触发下载。
- 使用
fetch
API 请求后端的/download/zip
接口。 - 如果请求成功,获取 Blob 数据并创建一个临时链接来下载 ZIP 文件。
测试
- 启动 Spring Boot 应用。
- 在浏览器中打开 HTML 文件,点击"Download ZIP"按钮。
- 浏览器将下载生成的 ZIP 文件。
这样,你就实现了一个简单的前后端分离的 ZIP 文件下载功能!