Angular 下载zip文件并重命名文件

最新推荐文章于 2025-03-12 14:58:20 发布

fanzhongli

最新推荐文章于 2025-03-12 14:58:20 发布

阅读量1.2k

点赞数 1

分类专栏： JAVA Spring Boot Angular Typescript Javascript 文章标签： javascript 前端 java ViewUI

JAVA 同时被 3 个专栏收录

9 篇文章

订阅专栏

Spring Boot

7 篇文章

订阅专栏

Angular

3 篇文章

订阅专栏

本文介绍如何使用Java后端设置HTTP响应头实现文件下载功能，并通过Angular前端框架完成文件的接收与重命名过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端Java代码需要设置response的header，如下

response.setContentType("application/octet-stream; charset=utf8");
response.setHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE);
response.setHeader(HttpHeaders.CONTENT_DISPOSITION,"attachment; filename="+zipName);

Angular/Typescript需要使用File类来重命名

download() {

const token = localStorage.getItem('token');

let headers: HttpHeaders = new HttpHeaders();

headers = headers
.set('Authorization', 'Bearer ' + token);
const url = 'http://localhost:8764/api/v1/user/downLoadZipFile';

this.http.get(url, {headers: headers, observe: 'response', responseType: 'blob'}).subscribe(response => {

console.log(response);

console.log(response.headers.keys());

this.downloadFile(response);
}, (error: HttpErrorResponse) => {

console.log(error.error);
});
}

downloadFile(data: HttpResponse<Blob>) {

const file = new Blob([data.body], {type: 'application/zip'});

const a = document.createElement('a');

a.id = 'tempId';
document.body.appendChild(a);

a.download = 'haha.zip';

a.href = URL.createObjectURL(file);

a.click();

const tempA = document.getElementById('tempId');

if (tempA) {

tempA.parentNode.removeChild(tempA);
}
 
}
}