文件下载显示进度条以及调取浏览器下载进程

 最近遇见项目的文件下载功能 总结了两种获取文件下载进度的方法

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();
})
}