前端实现
base64 文件流下载有多种方法，以下为你介绍几种常见的实现方式：
#### 导出 PDF 文件
当后端返回的是
base64 格式的 PDF 数据流时，可按如下方式处理：
```
javascript
// pdfbase 为
base64 的数据流
// 数据格式：data:application/pdf;filename=generated.pdf;
base64,JVBERi0xLjMKJbrfrOAKMyAwIG9iago....
const imgUrl = this.pdfbase;
const a = document.createElement('a');
a.href = imgUrl;
a.setAttribute('download', '文件名');
a.click();
```
此方法是通过创建一个 `<a>` 标签，将其 `href` 属性设置为
base64 数据流，再设置 `download` 属性为文件名，最后模拟点击该标签实现文件
下载 [^2]。
#### 导出 XLSX 文件
若要将
base64 字符串导出为 XLSX 文件并
下载，可按以下步骤操作：
1. **创建工具函数文件**：在 `utils/
base64ToFile.js` 文件中编写如下代码：
```
javascript
export const util = {
// 创建一个 a 标签，并做
下载点击事件
downloadFile: function(blob, fileName) {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
// 此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
},
// 将
Base64 文件
转为 Blob
buildBlobByByte: function(data) {
const raw = window.atob(data);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array]);
},
// 二进制数组 生成文件
downloadFileByByte: function(data, fileName) {
const blob = this.buildBlobByByte(data);
this.downloadFile(blob, fileName);
}
};
```
2. **在页面中使用**：在需要使用的页面引入该工具函数并调用 `downloadFileByByte` 方法：
```
javascript
import { util } from 'utils/
base64ToFile.js';
// 假设
base64Data 是后端返回的
base64 字符串
const
base64Data = 'your
Base64Data';
const fileName = 'example.xlsx';
util.downloadFileByByte(
base64Data, fileName);
```
此方法先将
base64 字符串
转换为 `Blob` 对象，再通过创建 `<a>` 标签模拟点击实现文件
下载 [^3]。
#### 后端返回
base64 文件流下载
当后端返回
base64 文件流时，前端可按以下方式处理：
```
javascript
downloadTemplate() {
this.$API.downloadTemplate().then(({ data }) => {
const binaryString = atob(data); // 解码
base64 字符串
const byteArray = new Uint8Array(binaryString.length); // 创建一个 Uint8Array
for (let i = 0; i < binaryString.length; i++) { // 填充 Uint8Array
byteArray[i] = binaryString.charCodeAt(i); // 获取每个字符的 Unicode 编码
}
const blob = new Blob([byteArray], { type: 'application/vnd.ms-excel' }); // 创建 Blob 对象
const objectUrl = URL.createObjectURL(blob); // 创建 Object URL
const a = document.createElement('a'); // 创建一个 <a> 元素
document.body.appendChild(a); // 将 <a> 元素添加到 DOM 中
a.style = 'display: none'; // 隐藏 <a> 元素
a.href = objectUrl; // 设置 <a> 元素的 href 属性为 Object URL
a.download = '链路模板配置.xlsx'; // 设置 <a> 元素的 download 属性为文件名
a.click(); // 模拟点击 <a> 元素
});
}
```
此方法先将
base64 字符串解码为二进制字符串，再将其
转换为 `Uint8Array`，接着创建 `Blob` 对象，最后通过创建 `<a>` 标签模拟点击实现文件
下载 [^4]。
扫一扫
2059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
