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

需求背景

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

相关推荐
杨超越luckly5 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
皮蛋瘦肉粥_1215 小时前
pink老师html5+css3day02
前端·css3·html5
qianmo20215 小时前
基于pycharm实现html文件的快速实现问题讨论
前端·html
IT_陈寒5 小时前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端
kura_tsuki5 小时前
[Web网页] 零基础入门 HTML
前端·html
岁月宁静6 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记6 小时前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
光影少年6 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花6 小时前
三种 弹出广告 代码开发实战
前端·html
练习时长一年6 小时前
Bean后处理器
java·服务器·前端