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

需求背景

在开发过程中会发现,有的时候下载后端返回的文件,浏览器右上角不会进行保存弹窗的弹出及下载进度,而是接口响应后文件下载完才会弹出保存并且没有进度条效果,这就导致在点击下载后用户是不知道文件下载到什么进度了,当然可以使用 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的域名 所以导致本地启动项目后下载文件的时候文件名是不对的 并没有使用后端在响应头里面返回的文件名 测试和生产为同一个域名不会存在这种问题

相关推荐
咔咔一顿操作21 分钟前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹29 分钟前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz1 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°1 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南1 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔2 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js
陈佬昔没带相机2 小时前
围观前后端对接的 TypeScript 最佳实践,我们缺什么?
前端·后端·api
90后的晨仔2 小时前
Vue 事件处理深入指南:从基础到进阶
前端·vue.js
qq_427506083 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序