vue下载大文件时浏览器不显示下载进度

问题描述

最近开发中遇到个问题，项目需要下载大文件（音视频），由于后端给我的是视频的地址而不是直接返回流，所以前端用了XMLHttpRequest获取视频流并实现下载功能。这时会发现点击下载按钮后会有很长一段时间的空白，页面没任何反正，然后才显示下载完成的文件。这是因为我们需要等获取到流后才触发浏览器下载，获取流会花费很长的时间。

要想实现下载时浏览器能显示下载进度，只能把获取流的请求抛给浏览器，使用a标签的download属性实现下载，代码如下：

let ele = document.createElement('a');
let fileName = 'xxx';
ele.download = fileName;
ele.href = 'url';
ele.style.display = 'none'
document.body.appendChild(ele)
ele.click();
ele.remove();

这时又出现了新的问题，点击后会发现浏览器会自动打开一个新页面播放视频，并没有我们一开始想的那样直接下载；对于这个情况，咨询了下运维，得知可以在nginx里配置解决。

解决方案

前端下载总结

1. 使用`XMLHttpRequest`获取流并下载

let _this = this;
let xhr = new XMLHttpRequest();
xhr.open('GET', this.url, true);
xhr.responseType = 'arraybuffer';    // 返回类型blob
xhr.onload = function () {if (xhr.readyState === 4 && xhr.status === 200) {let blob = this.response;// 转换一个blob链接let u = window.URL.createObjectURL(new Blob([blob],{ type: 'video/mp4' }))let a = document.createElement('a');a.download = fileName;a.href = u;a.style.display = 'none'document.body.appendChild(a)a.click();a.remove();}
};
xhr.send()

缺点

浏览器无法获取下载进度，只在下载完成后会在浏览器左下角出现文件下载完成；若文件比较大的话，从用户点击下载到文件下载完成中间会有一段空白期，用户体验不好。

2. 使用`FileSaver`下载文件

FileSaver下载文件是基于blob

FileSaver.saveAs(blob格式的文件, "下载的文件命名");

3. 使用a标签+Nginx配置实现下载

let ele = document.createElement('a');
let fileName = 'xxx';
ele.download = fileName;
ele.href = 'url';
ele.style.display = 'none'
document.body.appendChild(ele)
ele.click();
ele.remove();

4. 前端直接从AWS下载文件

// 安装
npm install aws-sdk// 引入
import AWS from 'aws-sdk'// AWS下载
AWS.config.update({accessKeyId: 'xxxx',secretAccessKey: 'xxxx',region: 'us-east-2'
})
const s3 = new AWS.S3()
const myBucket = 'xxxx'
const myKey = 'xxxx' // 文件存放的路径
const signedUrlExpireSeconds = 60 * 5const url = s3.getSignedUrl('getObject', {Bucket: myBucket,Key: myKey,Expires: signedUrlExpireSeconds
})
const link = document.createElement('a')
link.href = url
link.download = 'Q2_MTClient_v1.4.0-19_.txt' // 同域下有效
link.click()

vue下载大文件时浏览器不显示下载进度相关推荐

python下载大文件-golang/python 下载大文件时怎样避免oom
问题场景:高频系统中,agent 会向ATS 服务器发出刷新和预缓存的请求,这里的请求head 里面有GET ,PURGE等,因为一般的预缓存都是小文件,但是某天,突然服务器oom...罪魁祸首发现是 ...
IE浏览器下载excel文件时不弹出下载保存提示框的解决方法
在IE浏览器中下载文件的时候,下载保存的提示框不弹出了,特意咨询了一下解决的方法,特来和大家分享. 1.打开"我的电脑"后请点击工具列的:"工具 -- 文件夹选项&quo ...
python下载大文件-python-Django：允许用户下载大文件
我正在建立一个私人文件上传网站.爱丽丝上传文件,鲍勃下载文件. 除了Alice和Bob之外的其他人不应具有访问权限.我最初是在考虑为文件提供一个复杂的名称(http://domain/download ...
python下载大文件-使用python通过FTP下载大文件
对不起,如果我回答我自己的问题,但我找到了解决方案. 我尝试了ftputil没有成功,所以我尝试了很多方式,最后,这工作: def ftp_connect(path): link = FTP(host ...
python多线程下载大文件_Python threading多线程断点下载文件的方法
这是玩蛇网一篇关于Python多线程下载文件方法的代码实例.文中应用到的python模块和方法有httplib.Python urllib2.Python threading多线程模块.python ...
curl下载FTP文件时阻塞在某一进度的问题
解决方法一: 设置CURLOPT_LOW_SPEED_TIME.CURLOPT_LOW_SPEED_LIMIT 参数: 当传输速度小于CURLOPT_LOW_SPEED_LIMIT时(bytes/s ...
gee批量下载数据Google Drive下载大文件
目录 Google Earth Engine 申请教程: shp上传数据下载代码区域裁剪(裁剪对代码执行效率影响极大) 批量RUN Google Drive下载大文件 Google Drive→M ...
统计APP下载量--发现安卓下载大文件使用多线程下载方式
问题产生在项目开发过程中,会有各种各样的需求. 而在需求开发过程中,我们常常会遇到从没有见过的问题,这就需要我们一步一步排查. 在一次版本需求中,需要统计不同渠道APP的下载量. 理想很丰满,现实很 ...
Response.WriteFile 无法下载大文件解决方法
以前用Response.WriteFile(filename),但当遇到大文件时无法完整下载. 该方法最大的问题,它不是直接将数据抛到客户端,而是在服务器端(IIS)上缓存.当下载文件比较大时,服务器 ...

vue下载大文件时浏览器不显示下载进度

vue下载大文件时浏览器不显示下载进度

问题描述

解决方案

前端下载总结

1. 使用`XMLHttpRequest`获取流并下载

2. 使用`FileSaver`下载文件

3. 使用a标签+Nginx配置实现下载

4. 前端直接从AWS下载文件

vue下载大文件时浏览器不显示下载进度相关推荐

最新文章

热门文章

vue下载大文件时浏览器不显示下载进度

vue下载大文件时浏览器不显示下载进度

问题描述

解决方案

前端下载总结

1. 使用XMLHttpRequest获取流并下载

2. 使用FileSaver下载文件

3. 使用a标签+Nginx配置实现下载

4. 前端直接从AWS下载文件

vue下载大文件时浏览器不显示下载进度相关推荐

最新文章

热门文章

1. 使用`XMLHttpRequest`获取流并下载

2. 使用`FileSaver`下载文件