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

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

我是用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);
`