最近遇见项目的文件下载功能 总结了两种获取文件下载进度的方法
1 .axios
在axios里可调取onUploadProgress方法来获取 通过判断是否存在lengthComutable来获取下载进度
export const downloadFile = (data,source) => {
return http({
url: `/files/download?paths=${data}`,
method: 'get',
responseType:'blob',
cancelToken: source.token,
onDownloadProgress: function (progressEvent) {//axios封装的原生获取下载进度的事件，该回调参数progressEvent中包含下载文件的总进度以及当前进度
if (progressEvent.lengthComputable) {
//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
//如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
let downLoadProgress = null
downLoadProgress = progressEvent.loaded / progressEvent.total * 100 //实时获取最新下载进度
}
}
})
}
缺点:
不如调取浏览器下载进程方便 但在页面里如果需要获取下载进度条时优化选择此方案
2.fetch+streamSaver
前端在使用axios发送网络请求时，如文件下载，无法实时获取当前已经下载的文件流，只有当后端返回全部流时，才能在浏览器右下角显示已经完成的进度。 但是当文件很大时，就会出现长时间的等待，而且不显示下载进度。 此时可以通过fetch来发送网络请求实时获取已经下载的文件流, 同时需要依赖一个第三方npm包 streamsaver
通过npm install streamsaver下载插件
import streamSaver from "streamsaver"
export const downloadFile = (data,filename) => {
return fetch(`/files/download?paths=${data}`,{
method:'GET',
}).then(res=>{
// 创建写入流 filename为下载的文件名
const fileStream=streamSaver.createWriteStream(filename,{
size:res.headers.get("content-length")
})
const readableStream=res.body;
if(window.WritableStream&&readableStream.pipeTo){
return readableStream.pipeTo(fileStream).then(()=> {
})
}
window.writer=fileStream.getWriter();
const reader=res.body.getReader();
const pump=()=>reader.read().then(res=>res.done?
window.writer.close():window.writer.write(res.value).then(pump))
pump();
})
}