找回密码
 立即注册
首页 业界区 业界 后台返回文件URL,前端下载文件,即使设置文件名 ...

后台返回文件URL,前端下载文件,即使设置文件名

阎怀慕 7 天前
1.背景

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

当时一看是下载文件,觉得很简单,无非是通过创建a标签来实现,以下是我当时的代码,用的是antd mobile
点击查看代码
  1. / * // 后台返回的文件信息 { "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的最后一部分
1.png

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

于是我把URL通过fetch进一步转化为Blob
点击查看代码
  1. 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影响)


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册