【前端基础知识】如何下载后端以文件流形式传给前端的文件

@Dai

于 2023-03-01 15:43:47 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_46318413/article/details/127969598

前端专栏收录该内容

49 篇文章

订阅专栏

文章介绍了前端实现文件下载的三种常见技术，包括使用静态和动态创建的a标签，以及通过打开新窗口的方式，涉及Blob对象和URL.createObjectURL方法。

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

一、创建静态a标签，指定href

<a href="http://xxx.xxx.xxx/CV/test.xlsx" download="文件名称">下载</a>

在这里插入图片描述

二、以动态创建a标签进行下载

//res为后端接口返回的数据
const blob = new Blob([res.body], { type: 'application/octet-stream' });
const url = window.URL.createObjectURL(blob);

// 以动态创建a标签进行下载
const a = document.createElement('a');
const fileName = moment().format("YYYYMMDDHHmmss");
a.href = url;
a.download = fileName + '.xlsx';
a.click();
window.URL.revokeObjectURL(url);

三、打开新窗口方式进行下载

const blob = new Blob([res.body], { type: 'application/octet-stream' });
const url = window.URL.createObjectURL(blob);
// 打开新窗口方式进行下载
 window.open(url);
 
window.URL.revokeObjectURL(url);