目录

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

需求背景

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
by————组态2 分钟前
低代码 Web 组态
前端·人工智能·物联网·低代码·数学建模·组态
拉不动的猪6 分钟前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
菜冬眠。10 分钟前
uni-app/微信小程序接入腾讯位置服务地图选点插件
前端·微信小程序·uni-app
jayson.h10 分钟前
pdf解密程序
java·前端·pdf
萌萌哒草头将军12 分钟前
😡😡😡早知道有这两个 VueRouter 增强插件,我还加什么班!🚀🚀🚀
前端·vue.js·vue-router
苏卫苏卫苏卫36 分钟前
【Vue】案例——To do list:
开发语言·前端·javascript·vue.js·笔记·list
0509151 小时前
测试基础笔记第四天(html)
前端·笔记·html
聪明的墨菲特i2 小时前
React与Vue:哪个框架更适合入门?
开发语言·前端·javascript·vue.js·react.js
时光少年2 小时前
Android 副屏录制方案
android·前端
拉不动的猪2 小时前
v2升级v3需要兼顾的几个方面
前端·javascript·面试