当前位置：首页 > news >正文

前端下载文件时浏览器右上角没有保存弹窗及显示进度，下载完之后才会显示保存弹窗的问题定位及解决方案

news 来源：原创 2025/5/10 18:05:13

需求背景

在开发过程中会发现，有的时候下载后端返回的文件，浏览器右上角不会进行保存弹窗的弹出及下载进度，而是接口响应后文件下载完才会弹出保存并且没有进度条效果，这就导致在点击下载后用户是不知道文件下载到什么进度了，当然可以使用 onUploadProgress监听接口的进度去做一个进度条，但是会导致ui的差异

问题定位

对比代码差异，发现不同点为一个是后端返回的下载路径，一个是文件流，这就导致其实在下载的时候是有差异的，一个是直接通过a标签进行下载，一个是通过xmlhttprequest的方式，浏览器不会对xmlhttprequest的方式的下载进行进度的一个处理

解决方式

1.直接 window.location.href=‘域名+接口’ 的方式进行下载，但是这种方式会存在接口报错的话会直接打开浏览器的报错页面，跨域、文件名也没有办法进行设置，文件过大浏览器崩掉

2.文件上传oss或者cdn，后端返回下载地址前端进行下载，但是我们公司没有合作商并且文件是存在服务器磁盘里所以放弃这个方案

3.nginx做映射服务器文件，前端拼接域名及接口进行a.download下载

实现过程

 const DownloadItemClick = (e: Number) => {
    let filePath = DocumentList[e].filePath;
    const fullOrigin = window.location.origin;
    let url = '';
    //判断是否为本地 本地的话拼接dev的域名  这是示例所以我直接用includes判断了 实际过程中最好建立本地、测试、生产的三个env文件在里面去配置
    if (fullOrigin.includes('localhost')) {
      url = 'https://dev-website.7x-networks.net/file/download/' + filePath;
    } else {
      url = fullOrigin + '/file/download/' + filePath;
    }

    const a = document.createElement('a'); // 创建链接元素
    a.style.display = 'none'; // 隐藏链接
    a.href = url; // 设置链接的 href
    a.download = `${DocumentList[e].originalFileName}`; // 设置下载文件的文件名
    document.body.appendChild(a); // 将链接添加到 DOM
    a.click(); // 程序化点击链接
    document.body.removeChild(a); // 从 DOM 中移除链接
  };

注：因为本地访问的是dev的域名所以导致本地启动项目后下载文件的时候文件名是不对的并没有使用后端在响应头里面返回的文件名测试和生产为同一个域名不会存在这种问题