Java与Vue结合实现下载网络图片并导出为压缩包的实例
在Web开发中,经常会遇到需要批量下载网络图片并打包成ZIP文件的需求。本文将介绍如何使用Java和Vue.js技术栈来实现这一功能,并遵循良好的代码规范,以确保代码的可读性、可维护性和健壮性。
前端部分
首先,在前端使用Vue.js创建一个按钮组件,当用户点击该按钮时,会触发downloadMethod函数。此函数负责发送包含图片URL列表的请求,并处理服务器返回的ZIP文件流。
<el-col :span="1.5">
<el-button plain size="mini" class="btnImg" @click="downloadMethod">
<img :src="btnIcon.qinglingBtn" width="12px" />测试
</el-button>
</el-col>
methods: {
downloadMethod() {
var list = [
"http://XXXXX/whp/62267628-6e1c-4c06-8767-07328bc6eb07.png",
"http://XXXXX/whp/444f1192-ba3d-4658-b677-ace76605feb9.png"
];
downloadApi(list).then(response => {
const blob = new Blob([response], { type: 'application/zip' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'images.zip';
link.click();
URL.revokeObjectURL(link.href);
})
}
}
注意到我们这里调用了downloadApi函数,这是一个封装好的API调用方法,用于向后端发送POST请求。
API封装
为了使代码更加模块化和易于管理,我们将API请求逻辑封装在一个单独的JavaScript文件中。
export function downloadApi(data) {
return request({
url: '/ctm/externalApi/interface/download-images',
method: 'post',
responseType: 'blob',
data: data
})
}
后端部分
接下来是Java后端代码。我们定义了一个控制器方法,它接收一个图片URL列表,然后通过HttpClient下载这些图片,并将它们写入到一个ZIP输出流中。
@PostMapping("/download-images")
public void downloadImages(@RequestBody List<String> imageUrls, HttpServletResponse response) throws IOException {
response.setContentType("application/zip");
response.setHeader("Content-Disposition", "attachment; filename="images.zip"");
try (ZipOutputStream zipOut = new ZipOutputStream(response.getOutputStream());
CloseableHttpClient httpClient = HttpClients.createDefault()) {
for (String url : imageUrls) {
try {
InputStream imageStream = httpClient.execute(new HttpGet(URI.create(url))).getEntity().getContent();
ZipEntry entry = new ZipEntry(getFileNameFromUrl(url));
zipOut.putNextEntry(entry);
byte[] buffer = new byte[1024];
int len;
while ((len = imageStream.read(buffer)) > 0) {
zipOut.write(buffer, 0, len);
}
zipOut.closeEntry();
} catch (Exception e) {
System.err.println("Error downloading: " + url);
}
}
}
}
private String getFileNameFromUrl(String url) {
return url.substring(url.lastIndexOf('/') + 1);
}
以上代码展示了如何高效地从网络上下载图片并将它们打包成ZIP文件供用户下载。遵循良好的代码规范,如合理使用异常处理、保持代码简洁明了以及模块化设计等,可以大大提高代码的质量和项目的可维护性。