网站首页

人工智能P2P分享Wind搜索发布信息网站地图标签大全

当前位置:诺佳网 > 软件工程 > 前端开发 > React >

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

时间:2024-12-26 17:02

人气:

作者:admin

标签:

导读:1.背景 项目中遇到这么一个问题,上传文件后,后台返回的是一个URL,前端需要通过点击下载这个文件 2.首次处理 当时一看是下载文件,觉得很简单,无非是通过创建a标签来实现,以下...

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

温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

CPU | 内存 | 硬盘 | 显卡 | 显示器 | 主板 | 电源 | 键鼠 | 网站地图

Copyright © 2025-2035 诺佳网 版权所有 备案号:赣ICP备2025066733号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信