posts - 23,comments - 2,views - 25679

1.背景

项目中遇到这么一个问题,上传文件后,后台返回的是一个URL,前端需要通过点击下载这个文件

2.首次处理

当时一看是下载文件,觉得很简单,无非是通过创建a标签来实现,以下是我当时的代码,用的是antd mobile

点击查看代码
/ *
// 后台返回的文件信息
{
"filename": "test.pdf",
"size": 23888,
"path": "676cff7ae4b09f5f098d6695.pdf",
"url": "https://oss-sz-silas-1321516265.cos.ap-guangzhou.myqcloud.com/oss-sz-silas-dev/676cff7ae4b09f5f098d6695.pdf",
"ext": "pdf"
}
*/
// 前端下载文件逻辑
const handleDownloadPdf = (pdfUrl:string,filename:string)=> {
if(pdfUrl){
console.log(pdfUrl,filename)
const link = document.createElement('a');
link.href = pdfUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}else{
Toast.show({
content: "pdf路径不存在!",
icon: 'fail',
duration: 1000,
})
}
}

上面代码下载文件没问题,但是文件名称,始终是URL的最后一部分
image

3.emmm以前对后台返回的二进制流数据,进行文件下载,可以随意设置文件名。哦~,二进制流

于是我把URL通过fetch进一步转化为Blob

点击查看代码
const handleDownloadPdf = (pdfUrl:string,filename:string)=> {
if(pdfUrl){
fetch(pdfUrl)
.then(response => response.blob()) // response.blob() 方法来获取响应的 Blob 对象,这通常用于处理二进制数据,如文件
.then(blob => { // 获取Blob 对象
console.log(blob)
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = filename; // 使用filename
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url); // 释放之前创建的 Blob URL,这里可以不用再移除a了
})
}else{
Toast.show({
content: "pdf路径不存在!",
icon: 'fail',
duration: 1000,
})
}
}

4.结果

这次便达到了动态设置文件名的目的,
总结:直接使用URL进行文件下载,文件名将是URL最后那部分内容,而Blob对象允许我们读取和设置文件名(不受URL影响)
image

posted on   九零菜菜  阅读(97)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)
< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8

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