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

后端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);
}
 
}
}
 
 

 关于File类,可以参考以下文档

 

 

 

https://developer.mozilla.org/zh-CN/docs/Web/API/File

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护(两者的 GitHub 地址和项目主页皆不相同),所以就有了这个页面。传送门:Angular.js 特性 跨平台 渐进式 Web 应用 借助现代化 Web 平台的力量,交付 app 式体验。高性能、离线化、零安装。 原生 借助来自 Ionic、NativeScript 和 React Native 中的技术与思想,构建原生移动应用。 桌面 借助你已经在 Web 开发中学过的能力,结合访问原生操作系统 API 的能力,创造能在桌面环境下安装的应用,横跨 Mac、Windows 和 Linux 平台。 速度与性能 代码生成 Angular 会把你的模板转换成代码,针对现代 JavaScript 虚拟机进行高度优化,轻松获得框架提供的高生产率,同时又能保留所有手写代码的优点。 统一 在服务端渲染应用的首屏,像只有 HTML 和 CSS 的页面那样几乎瞬间展现,支持 node.js、.NET、PHP,以及其它服务器,为通过 SEO 来优化站点铺平了道路。 代码拆分 Angular 应用通过新的组件路由(Component Router)模块实现快速加载,提供了自动拆分代码的功能,为用户单独加载它们请求的视图中需要的那部分代码。 生产率 模板 通过简单而强大的模板语法,快速创建 UI 视图。 Angular 命令行工具 命令行工具:快速进入构建环节、添加组件和测试,然后立即部署。 各种 IDE 在常用 IDE 和编辑器中获得智能代码补全、实时错误反馈及其它反馈等特性。 完整开发故事 测试 使用 Karma 进行单元测试,让你在每次存盘时都能立即知道是否弄坏了什么。Protractor 则让你的场景测试运行得又快又稳定。 动画 通过 Angular 中直观简便的 API 创建高性能复杂编排和动画时间线 —— 只要非常少的代码。 可访问性 通过支持 ARIA 的组件、开发者指南和内置的一体化测试基础设施,创建具有完备可访问性的应用。 标签:Angular
Angular 中,你可以使用 `HttpClient` 模块来下载文件。下面是一个简单的示例代码: ```typescript import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-download', templateUrl: './download.component.html', styleUrls: ['./download.component.css'] }) export class DownloadComponent { constructor(private http: HttpClient) {} downloadFile() { const url = 'http://example.com/file.pdf'; // 替换为你要下载文件地址 this.http.get(url, { responseType: 'blob' }) .subscribe((blob: Blob) => { const downloadUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = downloadUrl; link.download = 'file.pdf'; // 替换为你希望保存的文件名 link.click(); URL.revokeObjectURL(downloadUrl); }); } } ``` 在这个示例中,我们使用 `HttpClient` 发起一个 GET 请求,指定 `responseType` 为 `'blob'`,以获取文件的二进制数据。然后,我们创建一个链接元素 `<a>`,设置其 `href` 属性为文件数据的 URL,设置 `download` 属性为你希望保存的文件名,并触发点击事件以触发下载。最后,我们使用 `URL.revokeObjectURL()` 来释放 URL 对象。 请注意,为了使上述代码正常工作,你需要在应用的模块中导入 `HttpClientModule`: ```typescript import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // ... HttpClientModule ], // ... }) export class AppModule { } ``` 这样,当用户点击一个按钮或执行某个操作时,你可以调用 `downloadFile()` 方法来下载文件。记得将 `url` 替换为你要下载文件地址,并设置合适的文件名。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值