前端下载文件如何才能在浏览器的底部显示下载进度

Question

是这样的
我写的下载是在后台下载完之后才出现底部的框框，
但是我想点击下载就显示这个框这个怎么弄，而且还显示下载的进度
显示成这样显示已下载多少的这样，

我是用a标签实现的下载
数据是后台传的二进制
`
let blobUrl = new Blob([res.data], {type: 'application/zip'})
console.log(blobUrl.size)
let a = document.createElement('a');
let url = window.URL.createObjectURL(blobUrl);
a.href = url;
a.download = d;
a.click();
window.URL.revokeObjectURL(url);
`

Answer 1

如果你不需要修改文件数据，请把控制权直接交给浏览器，不要用xhr自己请求得到ArrayBuffer。

只需把let url = createObjectURL 改成 let url = '你自己写的请求的url'

---

如果浏览器直接访问这个url有困难必须自己用js构造请求，那完全自己写一个进度条界面，下载完成 进度只显示99% 时再执行你的a标签那坨代码触发浏览器保存blob文件，然后100%进度完成

Answer 2

昨天和后端一起研究了这个问题，结果下载交给浏览器后要想实现进度的解决办法是后端弄的，后端返回的文件下载url，需要后端去设置请求头Content-Length，后端设置Content-Length后的url用window.open(url)实现下载就会显示进度。

Answer 3

你好，请问您那个浏览器显示文件下载进度的问题解决了吗

Answer 4

楼主解决了吗，求解决方法

Answer 5

我也跟你一样，等全部接收再弹出，没进度，求救