Angular下载文件/JS下载文件/把Base64字符串转成文件

 在前端下载文件有各种各样的方法, 但如果服务端只返回base64编码的字符串, 或者直接调用js生成各种下载模板, 怎么把base64字符串转化成文件呢?

使用 @moonncat/base64tofile 就轻松解决这个难题

//安装
npm install @moonncat/base64tofile@latest

然后就可以愉快地在Angular代码里进行下载操作了

import {File} from '@moonncat/base64tofile';

//实例化
var file=new File();
//传入base64编码的字符串, 触发浏览器下载文件
file.download('dGVzdA==');
//浏览器弹出下载框

或者直接用js调用

<!--引用文件-->
<script src='./file.js'></script>
<script>
    File.download('dGVzdA==');
</script>

 

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、付费专栏及课程。

余额充值