后端返回文件流，下载并重新命名文件

最新推荐文章于 2024-08-02 11:41:26 发布

原创最新推荐文章于 2024-08-02 11:41:26 发布 · 857 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

文章介绍了在前端处理后端返回的文件流数据的方法，包括将文件流转换为Blob对象，创建临时下载链接，使用HTML的<a>标签进行下载，并详细说明了重命名文件的步骤。这个过程涉及到数据交互、文件处理和DOM操作。

后端返回文件流，下载并重新命名文件

在后端返回文件流后，你可以使用以下步骤来下载并重新命名文件：

1.接收后端返回的文件流数据。

2.在前端创建一个 <a> 标签，并设置其 download 属性为你想要的新文件名。

3.将文件流数据转换为 Blob 对象。

4.使用 URL.createObjectURL() 方法创建一个临时的下载链接。

5.将下载链接赋值给 <a> 标签的 href 属性。

6.手动触发 <a> 标签的点击事件来开始下载文件。

下面是一个示例代码：

// 从后端接收到的文件流数据为 response.data

// 转换为 Blob 对象
const blob = new Blob([response.data], { type: 'application/octet-stream' });

// 创建临时下载链接
const downloadUrl = URL.createObjectURL(blob);

// 创建 <a> 标签
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'new_filename.ext'; // 设置新的文件名及扩展名

// 手动触发下载
link.click();

// 清理临时下载链接
URL.revokeObjectURL(downloadUrl);