随笔 - 28  文章 - 2  评论 - 1  阅读 - 25021

react 文件下载

如果想通过纯前端技术实现文件下载,直接把a标签的href属性设置为文件路径即可

//downloadSrc即为接口的地址即可
<a href={downloadSrc}>
<Button>Download</Button>
</a>

但是后端传的是文件流,这样下载的是markDown文件,如果想转换成其他格式文件,就要解析文件流,然后通过a标签下载解析出来的数据。

// 下载服务的Markdown文件
export async function downloadMDService() {
return request(downloadSrc, {
method: 'get',
params,
responseType: 'blob',//必须加
});
}
复制代码
const downloadFn = async () => {
const res = await downloadMDService();
if (res) {
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');//创建a标签
link.style.display = 'none';
link.href = url;////设置a标签路径
link.download = 'file';//设置文件名
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放 URL对象
document.body.removeChild(link);
}
};
复制代码

 



posted on   blue_hl  阅读(1494)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 一文读懂知识蒸馏
· 终于写完轮子一部分:tcp代理 了,记录一下
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示